:root{
  --paper:#f2f0ea;
  --paper-deep:#e8e5dd;
  --ink:#111112;
  --soft:#77756f;
  --line:rgba(17,17,18,.17);
  --acid:#d9ff43;
  --orange:#ff6537;
  --blue:#607dff;
  --max:2180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,sans-serif;cursor:none;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--acid);color:var(--ink)}

.page-reveal{
  position:fixed;inset:0;background:var(--ink);z-index:10000;
  transform-origin:top;animation:pageOpen .9s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes pageOpen{
  0%,18%{transform:scaleY(1)}
  100%{transform:scaleY(0)}
}

.cursor-dot,.cursor-ring{
  position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;
}
.cursor-dot{width:5px;height:5px;background:var(--ink)}
.cursor-ring{
  width:32px;height:32px;border:1px solid rgba(17,17,18,.42);
  transition:width .18s ease,height .18s ease,background .18s ease,border-color .18s ease;
}
body.cursor-hover .cursor-ring{
  width:54px;height:54px;background:var(--acid);border-color:transparent;mix-blend-mode:multiply;
}

.topbar{
  position:fixed;z-index:100;top:0;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 64px),var(--max));height:74px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-bottom:1px solid var(--line);
  background:rgba(242,240,234,.82);backdrop-filter:blur(18px);
}
.logo{display:flex;align-items:baseline;gap:10px;width:max-content}
.logo span{font-family:Manrope,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.06em}
.logo b{
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;color:var(--soft)
}
.topnav{display:flex;gap:30px}
.topnav a{font-size:12px;font-weight:500}
.availability{
  justify-self:end;display:flex;align-items:center;gap:9px;
  font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em
}
.availability i{
  width:6px;height:6px;border-radius:50%;background:#58a84e;
  box-shadow:0 0 0 4px rgba(88,168,78,.10)
}

.hero{
  position:relative;width:min(calc(100% - 64px),var(--max));
  min-height:min(100svh,1240px);margin:0 auto;
  padding:142px 0 56px;border-bottom:1px solid var(--line);overflow:hidden;
}
.hero-meta{
  position:absolute;top:106px;font-size:10px;color:var(--soft);
  text-transform:uppercase;letter-spacing:.12em
}
.hero-index{left:0}
.hero-side{right:0}
.overline{
  margin:0 0 27px;font-size:11px;text-transform:uppercase;letter-spacing:.17em;color:var(--soft)
}
.hero-copy{position:relative;z-index:2}
.hero h1{
  margin:0;max-width:1900px;
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(74px,5.9vw,150px);
  line-height:.82;letter-spacing:-.073em;
}
.hero h1>span{display:block}
.hero-line{display:flex!important;align-items:baseline;gap:.18em}
.hero-line em{
  font-family:Georgia,serif;font-size:.43em;font-weight:400;font-style:italic;letter-spacing:-.045em
}
.hero-line strong{font:inherit}
.hero-bottom{
  width:min(67%,1320px);margin-top:50px;
  display:grid;grid-template-columns:minmax(360px,680px) auto;gap:70px;align-items:end
}
.hero-bottom p{margin:0;max-width:600px;font-size:16px;line-height:1.72}
.arrow-link{
  display:flex;justify-content:space-between;align-items:flex-end;gap:42px;
  min-width:220px;padding-bottom:9px;border-bottom:1px solid var(--ink);
  font-size:11px;text-transform:uppercase;letter-spacing:.1em
}
.arrow-link b{font-size:24px;line-height:1}

.hero-lens{
  position:absolute;z-index:1;right:3%;bottom:56px;
  width:clamp(250px,17vw,420px);aspect-ratio:1;
  transition:transform .18s ease-out;
}
.lens-ring{
  position:absolute;border-radius:50%;border:1px solid var(--line)
}
.lens-ring-a{inset:0}
.lens-ring-b{inset:18%}
.lens-axis{
  position:absolute;left:4%;right:4%;top:50%;height:1px;background:var(--line);
  transform:rotate(-28deg)
}
.lens-core{
  position:absolute;inset:37%;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font-family:Manrope;font-size:clamp(28px,2.4vw,54px);font-weight:800;letter-spacing:-.08em
}
.lens-dot{
  position:absolute;width:14px;height:14px;border-radius:50%;background:var(--acid);
  left:21%;top:18%;box-shadow:0 0 0 8px rgba(217,255,67,.13);
  transition:transform .18s ease-out;
}
.lens-note{
  position:absolute;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--soft)
}
.lens-note-a{top:6%;right:8%}
.lens-note-b{bottom:9%;left:3%}
.hero-note{
  position:absolute;right:0;bottom:22px;
  font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.12em
}

.manifesto{
  width:min(calc(100% - 64px),var(--max));margin:0 auto;
  padding:112px 0 124px;display:grid;grid-template-columns:.46fr 1.54fr;gap:80px;
  border-bottom:1px solid var(--line)
}
.manifesto p{
  margin:8px 0 0;font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.12em
}
.manifesto h2{
  margin:0;max-width:1460px;
  font-family:Manrope,sans-serif;font-weight:600;
  font-size:clamp(46px,3.65vw,90px);line-height:1;letter-spacing:-.055em
}
.manifesto h2 span{font-family:Georgia,serif;font-style:italic;font-weight:400}

.work,.contact{
  width:min(calc(100% - 64px),var(--max));margin:0 auto
}
.work{padding:82px 0 110px}
.section-line{
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--ink);
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--soft)
}
.section-line b{justify-self:center;color:var(--ink);font-weight:500}
.section-line span:last-child{justify-self:end}

.project{
  position:relative;
  display:grid;grid-template-columns:68px minmax(420px,1.36fr) minmax(250px,.64fr) 42px;
  gap:24px;align-items:center;min-height:132px;
  border-bottom:1px solid var(--line);isolation:isolate;
  transition:padding .28s ease,color .28s ease
}
.project::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.22,.61,.36,1)
}
.project:hover::before{transform:scaleX(1)}
.project:hover{padding-left:14px;padding-right:10px}
.project-no{font-size:11px;color:var(--soft)}
.project-title h3{
  margin:0;font-family:Manrope,sans-serif;
  font-size:clamp(34px,2.7vw,64px);line-height:1;letter-spacing:-.055em
}
.project-title p{margin:7px 0 0;color:var(--soft);font-size:12px}
.project-type{font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.12em}
.project-arrow{justify-self:end;font-size:22px;transition:transform .25s ease}
.project:hover .project-arrow{transform:translate(4px,-4px)}

.project-preview{
  position:fixed;z-index:60;pointer-events:none;
  width:min(29vw,650px);aspect-ratio:1.35;
  left:0;top:0;opacity:0;
  transform:translate(-50%,-50%) scale(.965) rotate(-1deg);
  transition:opacity .18s ease,transform .22s ease
}
.project.is-active .project-preview{
  opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)
}
.preview{
  position:relative;width:100%;height:100%;overflow:hidden;
  border:1px solid rgba(17,17,18,.3);
  box-shadow:0 24px 80px rgba(0,0,0,.15)
}
.preview-caption{
  position:absolute;z-index:5;left:14px;top:12px;
  font-size:7px;letter-spacing:.15em;text-transform:uppercase
}
.parking-preview{background:#17191c;padding:5.6%}
.parking-preview .preview-caption{color:#8c939b}
.parking-screen{
  width:100%;height:100%;background:#0f1114;border:1px solid rgba(255,255,255,.12);padding:5%;color:#f2f3f4
}
.parking-top{
  display:grid;grid-template-columns:1fr 1fr 1fr;font-size:7px;letter-spacing:.18em;color:#8e959d;
  padding-bottom:4%;border-bottom:1px solid rgba(255,255,255,.1)
}
.parking-top span:nth-child(2){text-align:center}.parking-top span:last-child{text-align:right}
.parking-grid{display:grid;grid-template-columns:1fr 1fr .85fr;gap:3%;margin-top:4%}
.camera-a,.camera-b,.status-panel{min-height:130px;border:1px solid rgba(255,255,255,.08)}
.camera-a{background:linear-gradient(145deg,#1f2630,#101317)}
.camera-b{background:linear-gradient(145deg,#24251d,#12130f)}
.status-panel{display:flex;flex-direction:column;justify-content:center;padding:9%;background:#151815}
.status-panel small{font-size:7px;color:#89918a;letter-spacing:.14em}
.status-panel strong{font-size:20px;color:var(--acid);margin-top:6px}
.status-panel span{font-size:7px;color:#89918a;margin-top:5px}
.parking-log{display:grid;gap:8px;margin-top:4%}
.parking-log i{display:block;height:5px;background:#24282d}
.parking-log i:nth-child(2){width:83%}.parking-log i:nth-child(3){width:65%}.parking-log i:nth-child(4){width:44%}

.commerce-preview{background:#efe8dc;padding:6%}
.commerce-preview .preview-caption{color:#77746d}
.catalog-shell{height:100%;border:1px solid #25231f;padding:5%}
.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid #25231f;padding-bottom:5%}
.catalog-head b{font-family:Manrope;font-size:27px;letter-spacing:-.06em}
.catalog-head span{font-size:8px;color:#777}
.catalog-items{display:grid;grid-template-columns:repeat(3,1fr);gap:4%;margin-top:6%}
.catalog-items i{display:block;aspect-ratio:.72;background:linear-gradient(160deg,#82948e,#d9d2c4)}

.fashion-preview{background:#e9e4da}
.fashion-preview .preview-caption{color:#666159}
.fashion-word{
  position:absolute;left:5%;top:7%;font-family:Manrope;font-size:clamp(68px,7vw,128px);
  font-weight:800;letter-spacing:-.08em;z-index:1
}
.fashion-photo{position:absolute;right:7%;top:15%;width:49%;height:70%;background:linear-gradient(150deg,#302b2a,#a79e90)}
.fashion-caption{position:absolute;left:6%;bottom:7%;font-size:8px;text-transform:uppercase;letter-spacing:.17em}

.food-preview{background:#ff673f}
.food-preview .preview-caption{color:#27211f}
.food-word{
  position:absolute;left:5%;top:7%;font-family:Manrope;font-size:clamp(78px,7.8vw,145px);
  font-weight:800;letter-spacing:-.08em;color:#161616
}
.food-disc{position:absolute;border-radius:50%;box-shadow:0 16px 32px rgba(0,0,0,.2)}
.disc-a{width:37%;aspect-ratio:1;right:10%;top:14%;background:radial-gradient(circle at 40% 35%,#d7c19b,#654835 58%,#241c16 59%)}
.disc-b{width:27%;aspect-ratio:1;right:33%;bottom:10%;background:radial-gradient(circle at 40% 35%,#a9b46e,#4f5724 58%,#232515 59%)}
.food-caption{position:absolute;left:6%;bottom:6%;font-size:8px;text-transform:uppercase;letter-spacing:.17em}

.services{
  background:var(--ink);color:var(--paper);
  padding:80px 32px 86px
}
.services-inner{width:min(100%,var(--max));margin:0 auto}
.dark-line{border-bottom-color:rgba(242,240,234,.55);color:#8c8b84}
.dark-line b{color:var(--paper)}
.service-list{margin-top:42px;border-top:1px solid rgba(242,240,234,.25)}
.service-row{
  position:relative;display:grid;grid-template-columns:64px minmax(320px,.75fr) 1fr 40px;
  gap:24px;align-items:center;min-height:136px;
  border-bottom:1px solid rgba(242,240,234,.2);overflow:hidden
}
.service-row::before{
  content:"";position:absolute;inset:0;background:var(--acid);
  transform:translateY(102%);transition:transform .36s cubic-bezier(.22,.61,.36,1);z-index:0
}
.service-row:nth-child(2)::before{background:var(--orange)}
.service-row:nth-child(3)::before{background:var(--blue)}
.service-row>*{position:relative;z-index:1}
.service-row:hover::before{transform:translateY(0)}
.service-row:hover{color:var(--ink)}
.service-row:nth-child(3):hover{color:#fff}
.service-no{font-size:10px;color:#77766f}
.service-row:hover .service-no{color:currentColor}
.service-row h3{
  margin:0;font-family:Manrope;font-size:clamp(42px,3.2vw,78px);
  line-height:.9;letter-spacing:-.065em
}
.service-row p{
  margin:0;max-width:640px;color:#a2a19a;font-size:13px;line-height:1.65
}
.service-row:hover p{color:currentColor}
.service-row>b{justify-self:end;font-size:24px}
.service-foot{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:18px;color:#7d7c76;font-size:10px;text-transform:uppercase;letter-spacing:.11em
}

.contact{padding:80px 0 82px}
.contact-stage{padding-top:70px}
.contact-kicker{margin:0 0 18px;color:var(--soft);font-size:11px;text-transform:uppercase;letter-spacing:.13em}
.contact h2{
  margin:0;font-family:Manrope;font-size:clamp(66px,6vw,146px);
  line-height:.84;letter-spacing:-.078em;font-weight:800
}
.contact h2 span{font-family:Georgia,serif;font-style:italic;font-weight:400}
.contact-row{
  margin-top:62px;display:grid;grid-template-columns:1fr .65fr;gap:76px;align-items:end
}
.contact-main{
  display:flex;justify-content:space-between;align-items:center;
  min-height:92px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  font-family:Manrope;font-size:clamp(24px,1.8vw,42px);font-weight:600;letter-spacing:-.05em
}
.contact-main b{font-size:32px}
.contact-row p{margin:0;max-width:520px;color:var(--soft);font-size:14px;line-height:1.72}

.footer{
  width:min(calc(100% - 64px),var(--max));margin:0 auto;padding:22px 0 30px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:var(--soft);font-size:10px;text-transform:uppercase;letter-spacing:.11em
}

@media(min-width:2100px){
  .hero{padding-top:154px}
  .hero h1{font-size:150px}
  .hero-bottom{margin-top:60px}
  .project{min-height:146px}
  .service-row{min-height:148px}
}
@media(max-width:1200px){
  body{cursor:auto}
  .cursor-dot,.cursor-ring{display:none}
  .topbar,.hero,.manifesto,.work,.contact,.footer{width:calc(100% - 36px)}
  .availability{display:none}
  .topbar{grid-template-columns:1fr auto}
  .hero-lens{opacity:.45}
  .hero-bottom{width:100%;grid-template-columns:1fr auto}
  .project{grid-template-columns:50px 1fr 190px 32px}
  .project-preview{display:none}
  .service-row{grid-template-columns:48px 1fr 1fr 30px}
}
@media(max-width:760px){
  .topbar{height:64px}
  .logo b,.topnav a:nth-child(2){display:none}
  .topnav{gap:18px}
  .hero{padding-top:112px;min-height:auto;padding-bottom:48px}
  .hero-meta{top:82px}.hero-side{display:none}
  .hero h1{font-size:52px;line-height:.87}
  .hero-line{display:block!important}
  .hero-line em{display:block;font-size:.48em;margin:4px 0 3px}
  .hero-bottom{grid-template-columns:1fr;gap:30px;margin-top:38px}
  .hero-lens{position:relative;right:auto;bottom:auto;width:220px;margin:42px 0 0 auto}
  .hero-note{bottom:18px}
  .manifesto{grid-template-columns:1fr;gap:24px;padding:70px 0}
  .manifesto h2{font-size:46px}
  .work{padding:64px 0}
  .section-line{grid-template-columns:1fr 1fr}.section-line span:last-child{display:none}.section-line b{justify-self:end}
  .project{grid-template-columns:30px 1fr 26px;gap:13px;min-height:108px}
  .project-type{display:none}.project-title h3{font-size:32px}.project-title p{max-width:250px}
  .services{padding:64px 18px 68px}
  .service-row{grid-template-columns:28px 1fr 24px;gap:13px;min-height:118px}
  .service-row p{display:none}.service-row h3{font-size:48px}.service-row>b{grid-column:3}
  .contact{padding:64px 0}
  .contact h2{font-size:58px}
  .contact-row{grid-template-columns:1fr;gap:34px;margin-top:46px}
  .contact-main{min-height:78px;font-size:27px}
}


/* ===========================
   v4.2 — depth without clutter
   =========================== */

.project[role="button"]{outline:none}
.project[role="button"]:focus-visible{
  box-shadow:inset 0 0 0 2px var(--ink);
}

.process-strip{
  width:min(calc(100% - 64px),var(--max));
  margin:0 auto;
  padding:78px 0 82px;
  border-bottom:1px solid var(--line);
}
.process-line{
  display:grid;grid-template-columns:.45fr 1.55fr;gap:70px;
  padding-bottom:34px;border-bottom:1px solid var(--line);
}
.process-line>span{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--soft)
}
.process-line p{
  margin:0;max-width:1080px;
  font-family:Manrope,sans-serif;font-size:clamp(28px,2.1vw,52px);
  line-height:1.06;letter-spacing:-.045em
}
.process-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border-left:1px solid var(--line);
}
.process-steps>div{
  min-height:190px;padding:26px;border-right:1px solid var(--line);
}
.process-steps b{
  display:block;font-size:10px;color:var(--soft);letter-spacing:.12em
}
.process-steps span{
  display:block;margin-top:54px;
  font-family:Manrope,sans-serif;font-size:28px;font-weight:600;letter-spacing:-.05em
}
.process-steps p{
  margin:10px 0 0;max-width:330px;color:var(--soft);font-size:13px;line-height:1.65
}

/* CASE MODAL */
.case-modal{
  position:fixed;inset:0;z-index:500;
  pointer-events:none;visibility:hidden;
}
.case-modal.is-open{
  pointer-events:auto;visibility:visible;
}
.case-backdrop{
  position:absolute;inset:0;background:rgba(17,17,18,.32);
  backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s ease;
}
.case-modal.is-open .case-backdrop{opacity:1}
.case-sheet{
  position:absolute;right:0;top:0;height:100%;width:min(74vw,1500px);
  overflow:auto;background:var(--paper);color:var(--ink);
  padding:42px 52px 58px;
  transform:translateX(100%);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  box-shadow:-30px 0 80px rgba(0,0,0,.12);
}
.case-modal.is-open .case-sheet{transform:translateX(0)}
.case-close{
  position:sticky;top:0;margin-left:auto;z-index:5;
  appearance:none;border:1px solid var(--ink);background:var(--paper);
  width:48px;height:48px;border-radius:50%;font-size:24px;line-height:1;cursor:none
}
.case-close:hover{background:var(--acid)}
.case-sheet-head{padding:24px 0 40px}
.case-eyebrow{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--soft)
}
.case-sheet-head h2{
  margin:16px 0 12px;font-family:Manrope,sans-serif;font-size:clamp(58px,5vw,118px);
  line-height:.88;letter-spacing:-.075em
}
.case-sheet-head p{
  margin:0;max-width:880px;color:var(--soft);font-size:17px;line-height:1.7
}
.case-hero-visual{
  min-height:430px;border:1px solid var(--ink);overflow:hidden;position:relative;
  background:var(--paper-deep)
}
.case-hero-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.08))
}
.case-visual-sfera{
  background:
    radial-gradient(circle at 80% 18%,rgba(217,255,67,.25),transparent 20%),
    linear-gradient(145deg,#15171a,#2a3036)
}
.case-visual-sfera::before{
  content:"CONTROL / ENTRY / EXIT / ACCESS";
  position:absolute;left:5%;bottom:7%;right:5%;
  color:#e9ecef;font-family:Manrope,sans-serif;font-weight:700;
  font-size:clamp(34px,3.8vw,84px);letter-spacing:-.06em;line-height:.9
}
.case-visual-izbalyk{
  background:linear-gradient(145deg,#ddd6c8,#f2ede4)
}
.case-visual-izbalyk::before{
  content:"CATALOG / ORDER / 1C";
  position:absolute;left:5%;top:6%;
  font-family:Manrope,sans-serif;font-size:clamp(42px,4.4vw,96px);
  font-weight:800;letter-spacing:-.07em
}
.case-visual-izbalyk::after{
  content:"";
  position:absolute;right:6%;bottom:8%;width:42%;height:58%;
  background:linear-gradient(160deg,#728b84,#c9c1b5);
  border:1px solid rgba(17,17,18,.25)
}
.case-visual-profy{
  background:linear-gradient(145deg,#e4dfd5,#cbc4b8)
}
.case-visual-profy::before{
  content:"FORM";
  position:absolute;left:5%;top:5%;
  font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(80px,8vw,180px);
  letter-spacing:-.09em;z-index:2
}
.case-visual-profy::after{
  content:"";
  position:absolute;right:7%;top:12%;width:42%;height:76%;
  background:linear-gradient(150deg,#322f2f,#a39b8f)
}
.case-visual-kifood{
  background:#ff6941
}
.case-visual-kifood::before{
  content:"EAT";
  position:absolute;left:4%;top:4%;
  font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(100px,9vw,210px);
  letter-spacing:-.09em
}
.case-visual-kifood::after{
  content:"";
  position:absolute;right:10%;top:14%;width:34%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#d8bd8f,#6f4e34 58%,#2b2018 59%);
  box-shadow:0 30px 50px rgba(0,0,0,.2)
}
.case-grid-detail{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;border-left:1px solid var(--line);border-top:1px solid var(--line);
  margin-top:38px
}
.case-detail-block{
  min-height:210px;padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)
}
.case-detail-block>span{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--soft)
}
.case-detail-block p{
  margin:44px 0 0;max-width:600px;font-size:15px;line-height:1.72
}
.case-detail-block ul{
  margin:36px 0 0;padding-left:18px;display:grid;gap:9px;font-size:14px;line-height:1.5
}
.case-meta-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:38px;border-top:1px solid var(--line);border-left:1px solid var(--line)
}
.case-meta-row>div{
  padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)
}
.case-meta-row span{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--soft)
}
.case-meta-row b{
  display:block;margin-top:10px;font-size:14px;font-weight:500
}
.case-next{
  margin-top:64px;padding-top:22px;border-top:1px solid var(--ink);
  display:flex;justify-content:space-between;gap:30px;align-items:center
}
.case-next span{font-size:13px;color:var(--soft)}
.case-next a{
  font-family:Manrope,sans-serif;font-size:26px;font-weight:600;letter-spacing:-.04em
}

body.case-open{overflow:hidden}

@media(max-width:1200px){
  .process-strip{width:calc(100% - 36px)}
  .case-sheet{width:88vw;padding:32px 34px 48px}
}
@media(max-width:760px){
  .process-strip{width:calc(100% - 36px);padding:62px 0}
  .process-line{grid-template-columns:1fr;gap:20px}
  .process-line p{font-size:30px}
  .process-steps{grid-template-columns:1fr}
  .process-steps>div{min-height:150px}
  .process-steps span{margin-top:38px}
  .case-sheet{width:100vw;padding:22px 18px 40px}
  .case-close{width:42px;height:42px}
  .case-sheet-head h2{font-size:54px}
  .case-hero-visual{min-height:280px}
  .case-grid-detail{grid-template-columns:1fr}
  .case-detail-block{min-height:auto}
  .case-detail-block p{margin-top:26px}
  .case-meta-row{grid-template-columns:1fr}
  .case-next{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   v4.3 MAX — richer color, live cases, polished motion
   ========================================================= */

:root{
  --pink:#ff86b6;
  --violet:#8772ff;
  --mint:#79e6c2;
  --case-accent:var(--acid);
}

body{
  background:
    radial-gradient(circle at 12% 8%, rgba(217,255,67,.055), transparent 20%),
    radial-gradient(circle at 88% 18%, rgba(96,125,255,.05), transparent 22%),
    var(--paper);
}

.overline{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.tone-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:8px;
}
.tone-dot:first-child{margin-left:0}
.tone-acid{background:var(--acid)}
.tone-orange{background:var(--orange)}
.tone-blue{background:var(--blue)}

.signal-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:#58a84e;
  margin-right:7px;box-shadow:0 0 0 4px rgba(88,168,78,.1);
  animation:signalPulse 2.2s ease-in-out infinite;
}
@keyframes signalPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(88,168,78,.1)}
  50%{box-shadow:0 0 0 9px rgba(88,168,78,0)}
}

/* Hero gains a little color, without becoming loud */
.hero::before{
  content:"";position:absolute;left:47%;top:23%;
  width:14px;height:14px;border-radius:50%;background:var(--orange);
  opacity:.8;animation:heroFloatA 6s ease-in-out infinite;
}
.hero::after{
  content:"";position:absolute;left:58%;top:15%;
  width:8px;height:8px;border-radius:50%;background:var(--blue);
  opacity:.75;animation:heroFloatB 7.2s ease-in-out infinite;
}
@keyframes heroFloatA{50%{transform:translate(14px,-13px)}}
@keyframes heroFloatB{50%{transform:translate(-11px,15px)}}

.lens-core{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.18), transparent 22%),
    var(--ink);
}
.lens-core::after{
  content:"";position:absolute;width:14%;aspect-ratio:1;border-radius:50%;
  background:var(--acid);right:17%;bottom:19%;
}
.lens-ring-a{animation:lensSpin 18s linear infinite}
.lens-ring-b{animation:lensSpinReverse 13s linear infinite}
.lens-ring-a::before,.lens-ring-b::before{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;top:7%;left:50%;
  transform:translateX(-50%);background:var(--orange)
}
.lens-ring-b::before{background:var(--blue);top:auto;bottom:5%}
@keyframes lensSpin{to{transform:rotate(360deg)}}
@keyframes lensSpinReverse{to{transform:rotate(-360deg)}}

/* Projects: color appears only during interaction */
.project{
  --row-color:var(--acid);
}
.project[data-theme="parking"]{--row-color:var(--acid)}
.project[data-theme="commerce"]{--row-color:var(--mint)}
.project[data-theme="fashion"]{--row-color:var(--violet)}
.project[data-theme="food"]{--row-color:var(--orange)}
.project::before{background:var(--row-color)}
.project:hover .project-no{color:var(--ink)}
.project-live-link{
  position:absolute;right:60px;bottom:18px;
  font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:var(--soft);
  opacity:0;transform:translateY(5px);transition:.22s ease;
  z-index:4;
}
.project:hover .project-live-link{opacity:1;transform:none}
.project-live-link:hover{color:var(--ink);text-decoration:underline}

/* Soft colored section markers */
.manifesto{
  position:relative;
}
.manifesto::after{
  content:"";position:absolute;right:0;top:88px;width:52px;height:11px;
  background:linear-gradient(90deg,var(--acid) 0 33%,var(--orange) 33% 66%,var(--blue) 66%);
}

/* Case sheet */
.case-sheet{
  --case-accent:var(--acid);
  scrollbar-width:thin;
  scrollbar-color:rgba(17,17,18,.28) transparent;
}
.case-sheet::-webkit-scrollbar{width:8px}
.case-sheet::-webkit-scrollbar-thumb{background:rgba(17,17,18,.24);border-radius:999px}
.case-sheet-head h2{
  position:relative;width:max-content;max-width:100%;
}
.case-sheet-head h2::after{
  content:"";position:absolute;left:0;bottom:-10px;width:52px;height:5px;background:var(--case-accent)
}
.case-hero-wrap{position:relative}
.case-color-line{
  height:7px;background:
    linear-gradient(90deg,var(--case-accent) 0 45%,var(--orange) 45% 70%,var(--blue) 70%);
}
.case-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px
}
.case-site-link,.case-demo-scroll{
  min-height:64px;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  cursor:none;transition:.22s ease
}
.case-site-link:hover,.case-demo-scroll:hover{
  background:var(--case-accent);
}
.case-site-link[aria-disabled="true"]{
  opacity:.45;pointer-events:none
}
.case-site-link b,.case-demo-scroll b{font-size:22px}

/* Live demos */
.case-live-demo{
  margin-top:38px;padding-top:28px;border-top:1px solid var(--ink);
}
.case-demo-head{
  display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:18px
}
.case-demo-head>span{
  font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--soft)
}
.case-demo-head p{
  margin:0;max-width:540px;color:var(--soft);font-size:12px;line-height:1.6;text-align:right
}
.demo-shell{
  min-height:390px;border:1px solid var(--ink);
  background:#111214;color:#f4f4f0;padding:20px;position:relative;overflow:hidden
}
.demo-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#91969e
}
.demo-topbar .demo-live{color:#bce85f}
.demo-live i{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:#bce85f;margin-right:6px;
  animation:signalPulseLight 1.9s infinite
}
@keyframes signalPulseLight{
  50%{box-shadow:0 0 0 7px rgba(188,232,95,0)}
  0%,100%{box-shadow:0 0 0 3px rgba(188,232,95,.12)}
}

/* Sfera demo */
.sfera-demo-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px
}
.demo-camera{
  position:relative;min-height:260px;border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.2)),
    linear-gradient(145deg,#252e36,#0d1114);
  overflow:hidden
}
.demo-camera::before{
  content:"";position:absolute;left:0;right:0;bottom:28%;height:3px;
  background:#c4c8cc;transform:rotate(-8deg);transform-origin:left
}
.demo-barrier{
  position:absolute;left:14%;bottom:31%;width:44%;height:7px;
  background:repeating-linear-gradient(90deg,#f4f4f0 0 20px,#f05c4a 20px 40px);
  transform-origin:left center;transition:transform .65s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 4px 12px rgba(0,0,0,.25)
}
.demo-barrier.open{transform:rotate(-72deg)}
.demo-car{
  position:absolute;right:17%;bottom:22%;width:22%;height:18%;
  border:2px solid #d8dde0;border-radius:12px 16px 5px 5px;
  transition:transform .8s ease
}
.demo-car.move{transform:translateX(-35%)}
.demo-car::before,.demo-car::after{
  content:"";position:absolute;bottom:-7px;width:11px;height:11px;background:#08090a;border-radius:50%
}
.demo-car::before{left:15%}.demo-car::after{right:15%}
.sfera-panel{display:grid;gap:10px}
.demo-status-card,.demo-log-card{
  border:1px solid rgba(255,255,255,.1);padding:16px;background:#16181c
}
.demo-status-card span{display:block;font-size:9px;color:#8e949b;text-transform:uppercase;letter-spacing:.12em}
.demo-status-card strong{
  display:block;margin-top:9px;font-family:Manrope;font-size:27px;letter-spacing:-.05em;color:#d9ff43
}
.demo-status-card small{display:block;margin-top:5px;color:#8e949b}
.demo-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-btn{
  min-height:48px;border:1px solid rgba(255,255,255,.18);
  background:#1b1e22;color:#fff;font:inherit;font-size:11px;cursor:pointer;transition:.2s
}
.demo-btn:hover{background:#d9ff43;color:#111}
.demo-log-card{min-height:125px}
.demo-log-line{
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#8e949b
}
.demo-log-line b{color:#e7e9eb;font-weight:500}

/* Commerce demo */
.commerce-demo{
  background:#f1ede4;color:#171717
}
.commerce-demo .demo-topbar{border-color:rgba(17,17,18,.15);color:#77736c}
.shop-toolbar{
  display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:16px
}
.shop-cities{display:flex;gap:7px;flex-wrap:wrap}
.shop-chip{
  border:1px solid rgba(17,17,18,.25);background:transparent;
  padding:8px 10px;font:inherit;font-size:9px;cursor:pointer
}
.shop-chip.active{background:#171717;color:#fff}
.shop-cart{font-size:11px}
.shop-products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:15px
}
.shop-card{
  border:1px solid rgba(17,17,18,.17);padding:10px;background:#f7f3eb
}
.shop-image{
  aspect-ratio:1.08;background:
    radial-gradient(circle at 50% 45%,#77928b 0 18%,transparent 19%),
    linear-gradient(145deg,#c8c2b6,#e1ddd4);
  position:relative;overflow:hidden
}
.shop-card:nth-child(2) .shop-image{background:radial-gradient(circle at 50% 45%,#d28966 0 18%,transparent 19%),linear-gradient(145deg,#c8c2b6,#e1ddd4)}
.shop-card:nth-child(3) .shop-image{background:radial-gradient(circle at 50% 45%,#85945f 0 18%,transparent 19%),linear-gradient(145deg,#c8c2b6,#e1ddd4)}
.shop-card b{display:block;margin-top:9px;font-size:11px}
.shop-card small{display:block;margin-top:4px;color:#77736c}
.shop-add{
  width:100%;margin-top:9px;min-height:35px;border:1px solid #171717;background:transparent;
  font:inherit;font-size:9px;cursor:pointer
}
.shop-add:hover{background:#d9ff43}

/* Profy demo */
.profy-demo{
  background:#e9e4da;color:#171717;padding:0
}
.profy-stage{
  min-height:390px;position:relative;overflow:hidden;padding:20px
}
.profy-word{
  font-family:Manrope;font-weight:800;font-size:clamp(70px,7vw,130px);
  letter-spacing:-.085em;line-height:.8;position:relative;z-index:2
}
.profy-model{
  position:absolute;right:9%;top:11%;width:39%;height:76%;
  background:linear-gradient(150deg,#332f2f,#ada397);
  transition:filter .3s ease,background .3s ease;
}
.profy-copy{
  position:absolute;left:21px;bottom:22px;z-index:2;max-width:300px;
  font-size:11px;line-height:1.55
}
.swatches{
  position:absolute;right:20px;bottom:19px;display:flex;gap:8px;z-index:3
}
.swatch{
  width:31px;height:31px;border-radius:50%;border:1px solid #171717;cursor:pointer
}
.swatch[data-tone="graphite"]{background:#4a4747}
.swatch[data-tone="sand"]{background:#b8a895}
.swatch[data-tone="blue"]{background:#63748c}
.swatch.active{box-shadow:0 0 0 4px rgba(17,17,18,.11)}

/* Food demo */
.food-demo{background:#ff6941;color:#171717}
.food-toolbar{
  display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:14px
}
.food-cats{display:flex;gap:7px}
.food-cat{
  border:1px solid rgba(17,17,18,.3);background:transparent;padding:8px 10px;
  font:inherit;font-size:9px;cursor:pointer
}
.food-cat.active{background:#171717;color:#fff}
.food-cart{font-size:11px}
.food-products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:14px
}
.food-item{
  border:1px solid rgba(17,17,18,.25);padding:9px;background:rgba(255,255,255,.12)
}
.food-plate{
  aspect-ratio:1;position:relative
}
.food-plate::before{
  content:"";position:absolute;inset:13%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#d8be90,#6f4d32 58%,#2b2119 59%);
  box-shadow:0 10px 18px rgba(0,0,0,.16)
}
.food-item:nth-child(2) .food-plate::before{
  background:radial-gradient(circle at 40% 35%,#a9b66c,#525d29 58%,#242a18 59%)
}
.food-item:nth-child(3) .food-plate::before{
  background:radial-gradient(circle at 40% 35%,#e0b497,#914c32 58%,#332019 59%)
}
.food-item b{display:block;font-size:11px}
.food-item small{display:block;margin-top:4px}
.food-add{
  width:100%;min-height:34px;margin-top:8px;border:1px solid #171717;background:transparent;
  font:inherit;font-size:9px;cursor:pointer
}
.food-add:hover{background:#171717;color:#fff}

/* subtle entrance motion */
.project,.service-row,.manifesto h2,.process-strip,.contact-stage{
  animation-timeline:view();
  animation-range:entry 8% cover 28%;
  animation-name:viewLift;
  animation-fill-mode:both;
}
@keyframes viewLift{
  from{opacity:.2;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

.footer-status{display:inline-flex;align-items:center;gap:7px}
.footer-status i{
  width:5px;height:5px;background:#58a84e;border-radius:50%
}

@media(max-width:1000px){
  .project-live-link{display:none}
  .case-actions{grid-template-columns:1fr}
  .sfera-demo-grid{grid-template-columns:1fr}
  .shop-products,.food-products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .case-demo-head{flex-direction:column}
  .case-demo-head p{text-align:left}
  .demo-shell{min-height:320px;padding:14px}
  .shop-products,.food-products{grid-template-columns:1fr}
  .profy-model{width:46%;right:5%}
  .case-site-link,.case-demo-scroll{min-height:56px}
}


/* =========================================================
   Production pass
   ========================================================= */

html{scroll-padding-top:88px}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:4px;
}
.contact-side{align-self:end}
.contact-links{
  margin-top:22px;display:flex;gap:18px;flex-wrap:wrap
}
.contact-links a{
  padding-bottom:5px;border-bottom:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  transition:border-color .2s ease,color .2s ease
}
.contact-links a:hover{
  color:var(--blue);border-color:var(--blue)
}

.trust-strip{
  width:min(calc(100% - 64px),var(--max));
  margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--line);border-top:1px solid var(--line);
}
.trust-item{
  min-height:170px;padding:24px 26px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.trust-item>span{
  font-size:10px;color:var(--soft);letter-spacing:.12em
}
.trust-item p{
  margin:52px 0 0;max-width:470px;font-size:13px;line-height:1.7;color:var(--soft)
}
.trust-item b{color:var(--ink);font-weight:600}

.footer a:hover{text-decoration:underline}

/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .page-reveal{display:none}
}

/* Touch devices should not pretend to have a custom mouse cursor. */
@media (hover:none),(pointer:coarse){
  body{cursor:auto}
  .cursor-dot,.cursor-ring{display:none!important}
  .project-live-link{opacity:1;transform:none}
}

@media(max-width:760px){
  .trust-strip{
    width:calc(100% - 36px);grid-template-columns:1fr
  }
  .trust-item{min-height:145px}
  .trust-item p{margin-top:34px}
  .contact-links{gap:12px}
}