@font-face{font-family:'Wix Madefor Display';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/wix-madefor-display-cyrillic-800-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Wix Madefor Display';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/wix-madefor-display-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2197}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/wix-madefor-text-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/wix-madefor-text-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2197}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/wix-madefor-text-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/wix-madefor-text-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2197}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-cyrillic-500-italic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2197}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pt-mono-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/pt-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD,U+2197}
/* Layout: warm editorial page. A live "build your site" window opens the page; the portfolio is a pinned dark
   room with a 3D row of browser windows that scroll sideways; quiet sections follow on one grid. */
:root{
  --bg:#0B0B0E; --bg-alt:#131318; --surface:rgba(22,22,27,.78); --ink:#F5F5F2; --muted:#A0A0A8; --line:rgba(200,200,215,.18);
  --live:#C6FF3D; --live-ink:#DBFF8A; --live-soft:rgba(198,255,61,.14); --sun:#C6FF3D; --sun-soft:rgba(198,255,61,.16); --cyan:#B79CFF;
  --todo:#3B3014; --todo-ink:#F6DE8A; color-scheme:dark;
  --f-display:"Wix Madefor Display","Helvetica Neue",Arial,sans-serif;
  --f-body:"Wix Madefor Text","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-mono:"PT Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1260px; --r:16px; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B0B0E; --bg-alt:#131318; --surface:rgba(22,22,27,.78); --ink:#F5F5F2; --muted:#A0A0A8; --line:rgba(200,200,215,.18);
  --live:#C6FF3D; --live-ink:#DBFF8A; --live-soft:rgba(198,255,61,.14); --sun:#C6FF3D; --sun-soft:rgba(198,255,61,.16); --cyan:#B79CFF;
  --todo:#3B3014; --todo-ink:#F6DE8A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B0B0E; --bg-alt:#131318; --surface:rgba(22,22,27,.78); --ink:#F5F5F2; --muted:#A0A0A8; --line:rgba(200,200,215,.18);
  --live:#C6FF3D; --live-ink:#DBFF8A; --live-soft:rgba(198,255,61,.14); --sun:#C6FF3D; --sun-soft:rgba(198,255,61,.16); --cyan:#B79CFF;
  --todo:#3B3014; --todo-ink:#F6DE8A; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"locl" 0}
/* Bulgarian Cyrillic letterforms only in the big display headlines; running text keeps the standard forms */
*{font-feature-settings:"locl" 0 !important}
/* standard Cyrillic everywhere, so the particle headings match the real text glyph for glyph */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--live);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:12px}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin:0;text-wrap:balance}
em.s{font-family:var(--f-serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.label{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:600 16px/1 var(--f-body);text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .25s}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{box-shadow:0 12px 30px -12px color-mix(in srgb,var(--sun) 70%,transparent)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn .dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 30%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--live) 0%,transparent)}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:68px}
.logo{display:flex;align-items:baseline;gap:6px;text-decoration:none;font:800 21px/1 var(--f-display);letter-spacing:-.04em}
.logo em{font:italic 500 22px/1 var(--f-serif);letter-spacing:0}
.logo i{width:8px;height:8px;border-radius:50%;background:var(--live);align-self:center;margin-left:2px}
.menu{display:flex;gap:26px;margin:0 0 0 auto;padding:0;list-style:none;font-size:15px}
.menu a{text-decoration:none;color:var(--muted)} .menu a:hover{color:var(--ink)}
.lang{display:flex;gap:2px;font:13px/1 var(--f-mono)}
.lang a{padding:7px 9px;border-radius:999px;text-decoration:none;color:var(--muted)}
.lang a[aria-current="true"]{background:var(--ink);color:var(--bg)}
.top .btn{min-height:42px;padding:0 18px;font-size:14.5px}
@media (max-width:900px){.menu{display:none}.lang{margin-left:auto}}
@media (max-width:520px){.top .btn{display:none}}

/* hero: warm light follows the pointer, film grain on top */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(40px,7vw,96px) 0;--mx:70%;--my:30%}
.hero::before{content:"";position:absolute;inset:-20%;z-index:-2;pointer-events:none;
  background:radial-gradient(40vmax 34vmax at var(--mx) var(--my),color-mix(in srgb,var(--sun) 34%,transparent),transparent 70%),
             radial-gradient(36vmax 30vmax at 8% 92%,color-mix(in srgb,var(--live) 12%,transparent),transparent 70%);
  transition:background-position .2s}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .label{display:block;margin-bottom:22px}
.hero h1{font-size:clamp(58px,9.4vw,146px)}
.hero h1 .w{display:inline-block;animation:rise 1s var(--ease) both}
.hero h1 .w:nth-child(2){animation-delay:.08s}.hero h1 .w:nth-child(3){animation-delay:.16s}
@keyframes rise{from{transform:translateY(.25em) rotate(1.5deg)}}
.hero-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(28px,4vw,48px)}
@media (max-width:920px){.hero-row{grid-template-columns:minmax(0,1fr)}}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;margin:0;max-width:42ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* builder: type a name, pick a trade, watch a site appear */
.builder{display:grid;gap:14px;min-width:0}
.b-controls{display:grid;gap:10px}
.b-input{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:6px 6px 6px 16px;transition:border-color .2s,box-shadow .2s}
.b-input:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--sun) 30%,transparent)}
.b-input input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:600 18px/1.2 var(--f-body);font-feature-settings:"locl" 0;padding:10px 0;outline:none}
.b-input input::placeholder{color:var(--muted);font-weight:400}
.b-input kbd{font:12px/1 var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:8px 10px;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;cursor:pointer;font:500 14.5px/1 var(--f-body);padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);transition:background .2s,color .2s,border-color .2s,transform .2s}
.chip:hover{transform:translateY(-1px);border-color:var(--ink)}
.chip[aria-checked="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--live);outline-offset:2px}

.tilt{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);will-change:transform}
.window{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 1px 0 var(--line),0 40px 80px -40px rgba(60,35,10,.45)}
.bar{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg-alt);min-width:0}
.bar>i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.addr{margin-left:8px;display:flex;align-items:center;gap:8px;min-width:0;flex:1;background:var(--surface);border-radius:999px;padding:4px 4px 4px 4px}
.status{display:inline-flex;align-items:center;gap:6px;flex:none;font:12px/1 var(--f-mono);padding:6px 9px;border-radius:999px;color:var(--muted);background:var(--bg-alt);transition:background .3s,color .3s}
.status b{width:7px;height:7px;border-radius:50%;background:#A89F94;transition:background .3s}
.status.on{background:var(--live-soft);color:var(--live-ink)}
.status.on b{background:var(--live)}
.url{font:13px/1.2 var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.url span{color:var(--muted)}
.caret{display:inline-block;width:1.5px;height:1.05em;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* the mini site inside the builder: each trade gets its own layout, type and palette */
.mini{position:relative;container-type:inline-size;aspect-ratio:16/10.5;max-width:100%;overflow:hidden;background:var(--bg-alt)}
.mini .tpl{position:absolute;inset:0;opacity:1;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.mini .tpl.out{opacity:0;transform:scale(.985)}
.mini *{box-sizing:border-box}
@media (max-width:560px){.mini{aspect-ratio:4/3.3}}
/* live marquee */
.marquee{margin-top:clamp(44px,6vw,80px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.marquee .track{display:flex;gap:40px;width:max-content;padding-block:16px;animation:slide 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee a{text-decoration:none;display:inline-flex;align-items:center;gap:10px;font:600 17px/1 var(--f-body);white-space:nowrap}
.marquee a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live)}
.marquee .label{white-space:nowrap;align-self:center}

/* sections */
.sec{padding-block:clamp(72px,10vw,140px)}
.sec.alt{background:var(--bg-alt)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
@media (max-width:860px){.sec-head{grid-template-columns:minmax(0,1fr)}}
.sec-head h2{font-size:clamp(38px,6vw,84px)}
.sec-head .label{display:block;margin-bottom:18px}
.sec-head p{margin:0;font-size:18px;color:var(--muted);max-width:46ch}

/* work: a pinned, dark "screening room". Scrolling moves a 3D row of browser windows sideways;
   the room takes on each client's colour and the client name glows behind. Without JS it is a plain list. */
#work{position:relative}
.gallery{display:grid;gap:clamp(56px,8vw,96px)}
.slide{display:grid;gap:16px;min-width:0}
.slide .shot{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 30px 60px -40px rgba(30,15,5,.55);text-decoration:none}
.slide .shot img{width:100%;height:auto;aspect-ratio:1100/600;object-fit:cover;object-position:top}
.bar .host{margin-left:8px;font:12px/1 var(--f-mono);color:var(--muted);background:var(--surface);border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bar .host::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);flex:none}
.bar .host.soon::before{background:var(--sun)}
.poster{position:relative;aspect-ratio:1100/600;background:#17140F;color:#F2C230;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,3vw,40px);overflow:hidden}
.poster::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 80% 10%,rgba(198,255,61,.35),transparent 60%),repeating-linear-gradient(135deg,rgba(242,194,48,.08) 0 14px,transparent 14px 30px)}
.poster strong{position:relative;font:800 clamp(30px,5vw,72px)/.92 var(--f-display);letter-spacing:-.03em;text-transform:uppercase}
.poster small{position:relative;font:12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;margin-top:12px;color:#EADFC8}
.meta{display:grid;gap:10px}
.meta h3{font-size:clamp(28px,3.2vw,44px)}
.meta p{margin:0;color:var(--muted);max-width:52ch}
.meta dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;margin:4px 0 0;font-size:15px}
.meta dt{font:12px/1.9 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.meta dd{margin:0}
.soon-tag{justify-self:start;display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;background:var(--sun-soft);color:var(--ink);padding:7px 11px;border-radius:999px}
.soon-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun);animation:pulse 2.4s ease-in-out infinite}
.case-link{justify-self:start;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.room-ui,.hint{display:none}

/* --- immersive mode (JS adds .gx on <html>) --- */
.gx #work{padding:0}
.gx #work>.wrap{position:relative;height:100svh;min-height:640px;max-width:none;padding:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;
  background:var(--room,#0B0B0E);color:#F5F5F2;transition:background-color .9s var(--ease)}
.gx #work>.wrap::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 50% 45%,rgba(255,255,255,.10),transparent 70%),radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.55),transparent 60%)}
.gx #work .sec-head{position:relative;z-index:3;margin:0;padding:calc(env(safe-area-inset-top,0px) + 84px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));max-width:var(--maxw);width:100%;margin-inline:auto;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.gx #work .sec-head h2{font-size:clamp(28px,3.6vw,48px)}
.gx #work .sec-head p{display:none}
.gx #work .label{color:rgba(245,245,242,.6)}
.gx .ghost{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-62%);white-space:nowrap;pointer-events:none;
  font:800 clamp(80px,17vw,280px)/1 var(--f-display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);transition:opacity .4s}
.gx .gallery{position:relative;z-index:2;display:block;perspective:1800px;perspective-origin:50% 40%;min-height:0}
.gx .slide{position:absolute;left:0;top:50%;width:var(--cw);transform-style:preserve-3d;will-change:transform;margin-top:calc(var(--ch) / -2)}
.gx .slide .shot{border-color:rgba(255,255,255,.12);box-shadow:0 50px 90px -40px rgba(0,0,0,.8)}
.gx .slide .bar{background:#2A2622;border-color:rgba(255,255,255,.08)}
.gx .slide .bar .host{background:#1A1714;color:#CFC5B8}
.gx .slide .bar>i{background:#4A433C}
.gx .meta{transition:opacity .35s var(--ease),transform .5s var(--ease);padding-top:6px;width:max(100%,min(620px,86vw))}
@media (max-height:820px){.gx .meta dl{display:none}.gx .meta h3{font-size:clamp(26px,2.8vw,38px)}}
@media (max-height:640px){.gx .meta p{display:none}}
.gx .meta p,.gx .meta dt{color:rgba(245,245,242,.7)}
.gx .meta dl{font-size:14.5px}
.gx .soon-tag{background:rgba(198,255,61,.18);color:#F8D9A6}
.gx .room-ui{position:relative;z-index:3;display:flex;align-items:center;gap:18px;justify-content:space-between;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 22px) max(20px,env(safe-area-inset-left,0px))}
.room-ui .count{font:13px/1 var(--f-mono);letter-spacing:.06em;color:rgba(245,245,242,.75);min-width:64px}
.room-ui .track{flex:1;height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.room-ui .track b{display:block;height:100%;width:100%;background:var(--sun);transform-origin:left;transform:scaleX(var(--gp,0))}
.room-ui button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#F5F5F2;font:18px/1 var(--f-body);transition:background .2s,border-color .2s}
.room-ui button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.room-ui button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.gx .slide:not(.on) .shot{cursor:pointer}
.gx .hint{font:12.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(245,245,242,.55);display:flex;align-items:center;gap:8px}
.gx .hint i{width:22px;height:1px;background:currentColor;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{50%{transform:translateX(6px)}}
@media (max-width:720px){.gx .meta dl{display:none}.gx #work .sec-head h2{font-size:28px}.gx .meta h3{font-size:30px}.gx .meta p{font-size:15.5px}.gx .hint{display:none}.gx #work .sec-head{grid-template-columns:minmax(0,1fr);padding-top:calc(env(safe-area-inset-top,0px) + 80px)}}
/* services */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc{grid-template-columns:minmax(0,1fr)}}
.svc article{padding:28px 28px 32px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start;min-width:0}
.svc h3{font-size:22px;letter-spacing:-.02em}
.svc p{margin:0;color:var(--muted)}

/* process: a line fills as you scroll through the steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:st;position:relative;--p:0}
.steps::before{content:"";position:absolute;left:0;right:0;top:-24px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--sun),var(--live));transform-origin:left;transform:scaleX(var(--p))}
.steps::after{content:"";position:absolute;left:0;right:0;top:-24px;height:3px;border-radius:2px;background:var(--line);z-index:-1}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:st;background:var(--surface);border-radius:var(--r);padding:26px;display:grid;gap:10px;align-content:start;min-width:0}
.steps li::before{content:counter(st);font:800 56px/1 var(--f-display);letter-spacing:-.04em;color:var(--line)}
.steps li.key{background:var(--ink);color:var(--bg)}
.steps li.key::before{color:var(--sun)}
.steps li.key p{color:color-mix(in srgb,var(--bg) 72%,var(--ink))}
.steps h3{font-size:22px;letter-spacing:-.02em}
.steps p{margin:0;color:var(--muted);font-size:16px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:960px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:30px;display:grid;gap:16px;align-content:start;min-width:0;transition:transform .3s var(--ease),box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(60,35,10,.4)}
.plan.mid{border:2px solid var(--ink)}
.plan h3{font-size:26px;letter-spacing:-.02em}
.plan .for{margin:0;color:var(--muted);font-size:15.5px}
.price{font:800 40px/1 var(--f-display);letter-spacing:-.03em;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.price small{font:400 15px/1.3 var(--f-body);letter-spacing:0;color:var(--muted)}
.todo{display:inline-block;background:var(--todo);color:var(--todo-ink);font:600 12px/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:6px;border:1px dashed currentColor}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15.5px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"";flex:none;width:14px;height:8px;margin-top:7px;border-left:2px solid var(--live);border-bottom:2px solid var(--live);transform:rotate(-45deg)}
.care{margin-top:20px;border-radius:var(--r);background:var(--bg-alt);padding:26px 30px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.care p{margin:0;max-width:62ch}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:960px){.reviews{grid-template-columns:minmax(0,1fr)}}
.review{margin:0;border:1.5px dashed var(--line);border-radius:var(--r);padding:28px;display:grid;gap:14px;min-width:0}
.review blockquote{margin:0;font:italic 500 24px/1.3 var(--f-serif);color:var(--muted)}
.review figcaption{font-size:14.5px;color:var(--muted)}

/* faq */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font:700 clamp(19px,2vw,23px)/1.3 var(--f-display);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 28px/1 var(--f-body);transition:transform .25s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 24px;color:var(--muted);max-width:68ch}

/* contact */
.contact{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--bg);border-radius:clamp(18px,2.5vw,28px);padding:clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.contact::before{content:"";position:absolute;z-index:-1;inset:auto -10% -40% 30%;height:90%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sun) 40%,transparent),transparent);pointer-events:none}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
.contact h2{font-size:clamp(38px,5.4vw,76px)}
.contact .sub{margin:18px 0 0;color:color-mix(in srgb,var(--bg) 72%,var(--ink));max-width:42ch}
.direct{display:grid;gap:10px;margin-top:32px}
.direct div{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;border-top:1px solid color-mix(in srgb,var(--bg) 18%,var(--ink));padding-top:12px}
.direct .k{font:12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;opacity:.65;width:100%}
.direct a{font-weight:600;font-size:18px;text-decoration:none;overflow-wrap:anywhere}
.copy{all:unset;cursor:pointer;margin-left:auto;font:12px/1 var(--f-mono);padding:7px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--bg) 30%,var(--ink))}
.copy:focus-visible{outline:2px solid var(--live);outline-offset:2px}
form{display:grid;gap:16px;min-width:0}
.field{display:grid;gap:7px}
.field label{font-size:14.5px;font-weight:600}
.field input{font-feature-settings:"locl" 0;width:100%;min-height:54px;border-radius:12px;border:1px solid color-mix(in srgb,var(--bg) 22%,var(--ink));background:color-mix(in srgb,var(--bg) 6%,var(--ink));color:var(--bg);padding:0 16px;font:400 16.5px var(--f-body)}
.field input::placeholder{color:color-mix(in srgb,var(--bg) 48%,var(--ink))}
.field input:focus{outline:2px solid var(--sun);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:color-mix(in srgb,var(--bg) 78%,var(--ink))}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--live);flex:none}
.notice{font-size:13.5px;margin:0;color:color-mix(in srgb,var(--bg) 66%,var(--ink))}
.notice a{color:inherit}
.contact .btn-primary{background:var(--sun);border-color:var(--sun);color:#0B0B0E;justify-self:start}
.hp{position:absolute;left:-5000px}
.form-msg{margin:0;font-weight:600}
.form-msg.err{color:#FF9C8A}

/* footer */
.foot{padding-block:40px 56px;font-size:14.5px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.foot a{color:inherit}

/* reveal: transform only, content always visible */
.rv{transition:transform .9s var(--ease)}
.rv.pre{transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv.pre{transform:none}.tilt{transform:none}.marquee .track{transform:none}}

/* legal pages */
.doc{max-width:760px;padding-block:64px 96px}
.doc h1{font-size:clamp(36px,6vw,64px);margin-bottom:24px}
.doc h2{font-size:24px;letter-spacing:-.02em;margin:36px 0 10px}
.doc p,.doc li{color:var(--muted)}
.builder>*,.hero-row>*{min-width:0}
.window{max-width:100%}
@media (max-width:420px){.b-input kbd{display:none}}

/* zone transitions: one fixed colour field behind the page cross-fades between section tones,
   and each section has its own entrance (see the block at the end) */
.bgfx{position:fixed;inset:0;z-index:-1;background:var(--bg);transition:background-color 1s var(--ease);pointer-events:none}
.bgfx::after{content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fxon .sec.alt{background:transparent}

/* link to the full portfolio */
.sh-side{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.all-link{font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;white-space:nowrap}
.gx #work .all-link{color:#F5F5F2}
.gx #work .sec-head .sh-side{justify-self:end}
@media (max-width:720px){.gx #work .sec-head .sh-side{justify-self:start}}

/* full portfolio page */
.pv{padding-block:clamp(40px,7vw,96px) clamp(72px,10vw,120px)}
.pv-head{display:grid;gap:18px;margin-bottom:clamp(28px,4vw,48px)}
.pv-head h1{font-size:clamp(48px,8vw,120px)}
.pv-head p{margin:0;color:var(--muted);font-size:18px;max-width:52ch}
.pv-tools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:28px}
.pv-tools .chips{gap:8px}
.chip .c{font:12px/1 var(--f-mono);opacity:.6;margin-left:6px}
.psearch{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:0 16px;min-height:46px;min-width:min(320px,100%)}
.psearch:focus-within{border-color:var(--ink)}
.psearch input{border:0;background:transparent;color:var(--ink);font:500 16px var(--f-body);outline:none;flex:1;min-width:0;padding:10px 0}
.psearch svg{width:16px;height:16px;flex:none;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.pcard{display:grid;gap:14px;align-content:start;min-width:0;animation:pin .7s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes pin{from{transform:translateY(24px)}}
.pcard[hidden]{display:none}
.pshot{position:relative;display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);text-decoration:none;isolation:isolate;
  box-shadow:0 26px 50px -36px rgba(30,15,5,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pshot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--room) 70%,transparent));opacity:0;transition:opacity .45s}
.pshot img{width:100%;height:auto;aspect-ratio:1100/600;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.pshot .poster{aspect-ratio:1100/600}
.pshot .go{position:absolute;z-index:3;right:14px;bottom:14px;font:600 13px/1 var(--f-body);color:#fff;background:color-mix(in srgb,var(--room) 85%,#000);padding:9px 12px;border-radius:999px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
a.pshot:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px color-mix(in srgb,var(--room) 80%,transparent)}
a.pshot:hover img{transform:scale(1.04)}
a.pshot:hover::after,a.pshot:hover .go,a.pshot:focus-visible .go{opacity:1;transform:none}
.pmeta{display:grid;gap:6px}
.pmeta h2{font-size:24px;letter-spacing:-.02em;line-height:1.1}
.pmeta p{margin:0;color:var(--muted);font-size:15.5px}
.pempty{text-align:center;color:var(--muted);padding:48px 0}
.back{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font:13px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.back:hover{color:var(--ink)}
/* preview: both language versions ship, only the active one shows */
html[lang="en"] .pv[data-pv-lang="bg"],html[lang="bg"] .pv[data-pv-lang="en"]{display:none}
@media (prefers-reduced-motion:reduce){.pcard{animation:none}}
.pmeta h2,.pmeta h2 *{font-feature-settings:"locl" 0 !important}
/* entering the dark room: the screen widens from an inset, rounded window to full bleed */
.gx #work>.wrap{clip-path:inset(0 calc((1 - var(--we,1)) * 5vw) round calc((1 - var(--we,1)) * 44px))}
/* leaving it: the next zone slides over the room as a rounded sheet */
.fxon #services{position:relative;z-index:2;background:var(--bg-alt);margin-top:-56px;border-radius:clamp(24px,4vw,48px) clamp(24px,4vw,48px) 0 0;box-shadow:0 -40px 80px -30px rgba(0,0,0,.45)}

/* ---------- each zone enters its own way (driven by --e: 0 when the section's top meets the screen bottom, 1 when settled) ---------- */
.fxon .sec .sec-head h2{transform:translateY(calc((1 - var(--e,1)) * 48px))}
/* services: the six cards flip up like tiles, one after another */
.fxon #services .svc{perspective:1200px}
.fxon #services .svc article{transform-origin:50% 0;
  transform:rotateX(calc((1 - clamp(0, var(--e,1) * 1.7 - var(--k,0) * .13, 1)) * -78deg)) translateY(calc((1 - clamp(0, var(--e,1) * 1.7 - var(--k,0) * .13, 1)) * 30px))}
#services .svc article:nth-child(2){--k:1}#services .svc article:nth-child(3){--k:2}#services .svc article:nth-child(4){--k:3}#services .svc article:nth-child(5){--k:4}#services .svc article:nth-child(6){--k:5}
/* process: a dark iris opens from the middle of the screen and the steps light up inside it */
.fxon #process{position:relative;isolation:isolate;background:transparent;padding-top:clamp(72px,10vw,140px)!important;transition:color .5s}
.fxon #process::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 60% at 50% 30%,#2B241D,#15110D);clip-path:circle(calc(var(--e,1) * 130%) at 50% 35%)}
.fxon #process.lit{color:#F5F5F2}
.fxon #process.lit .label,.fxon #process.lit .sec-head p{color:rgba(245,245,242,.65)}
.fxon #process.lit .steps li{background:#2A241E;color:#F5F5F2}
.fxon #process.lit .steps li::before{color:#4A4037}
.fxon #process.lit .steps li p{color:rgba(245,245,242,.7)}
.fxon #process.lit .steps li.key{background:var(--sun);color:#0B0B0E}
.fxon #process.lit .steps li.key::before{color:#0B0B0E}
.fxon #process.lit .steps li.key p{color:rgba(11,11,14,.75)}
.fxon #process.lit .steps::after{background:#3A322A}
.fxon #process .steps li{transform:scale(calc(.9 + .1 * clamp(0, var(--e,1) * 1.4 - var(--k,0) * .12, 1)));transition:background .5s,color .5s}
#process .steps li:nth-child(2){--k:1}#process .steps li:nth-child(3){--k:2}#process .steps li:nth-child(4){--k:3}
/* pricing: the plans rise out of the floor in 3D, staggered */
.fxon #pricing .plans{perspective:1400px}
.fxon #pricing .plan{transform-origin:50% 100%;
  transform:translateY(calc((1 - clamp(0, var(--e,1) * 1.5 - var(--k,0) * .18, 1)) * 120px)) rotateX(calc((1 - clamp(0, var(--e,1) * 1.5 - var(--k,0) * .18, 1)) * 38deg))}
#pricing .plan:nth-child(2){--k:1}#pricing .plan:nth-child(3){--k:2}
.fxon #pricing .plan:hover{transform:translateY(-4px)}
/* reviews: a curtain wipes in from the right */
.fxon #reviews>.wrap{clip-path:inset(0 0 0 calc((1 - var(--e,1)) * 70%) round calc((1 - var(--e,1)) * 40px));transform:translateX(calc((1 - var(--e,1)) * 80px))}
/* faq: questions slide in from the left one by one, their rules draw across */
.fxon #faq details{transform:translateX(calc((1 - clamp(0, var(--e,1) * 1.6 - var(--k,0) * .12, 1)) * -90px));border-bottom-color:transparent;
  background:linear-gradient(var(--line),var(--line)) left bottom/calc(clamp(0, var(--e,1) * 1.6 - var(--k,0) * .12, 1) * 100%) 1px no-repeat}
#faq details:nth-child(2){--k:1}#faq details:nth-child(3){--k:2}#faq details:nth-child(4){--k:3}#faq details:nth-child(5){--k:4}
/* contact: the dark card grows from a small tile to fill the frame */
.fxon #contact .contact{transform:scale(calc(.82 + .18 * var(--e,1)));border-radius:calc(28px + (1 - var(--e,1)) * 60px);transform-origin:50% 30%}
@media (prefers-reduced-motion:reduce){.fxon #process::before{clip-path:none}}

/* ---------- cinematic layer: particle headings, light shafts, dust motes, cursor ring ---------- */
.dust{position:fixed;inset:0;z-index:15;pointer-events:none}
/* light shafts in the hero, slowly breathing */
.rays{position:absolute;inset:-10% 0 auto 30%;height:120%;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(60% 70% at 55% 20%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 55% 20%,#000,transparent 75%)}
.rays i{position:absolute;top:0;bottom:0;width:clamp(30px,5vw,80px);background:linear-gradient(180deg,color-mix(in srgb,var(--sun) 55%,transparent),transparent 85%);filter:blur(14px);opacity:.35;transform:skewX(-14deg);animation:ray 7s ease-in-out infinite}
.rays i:nth-child(1){left:8%;animation-delay:-1s}.rays i:nth-child(2){left:24%;width:clamp(16px,2vw,36px);animation-delay:-3s}
.rays i:nth-child(3){left:41%;animation-delay:-5s}.rays i:nth-child(4){left:57%;width:clamp(12px,1.6vw,28px);animation-delay:-2s}
.rays i:nth-child(5){left:70%;animation-delay:-4s}.rays i:nth-child(6){left:86%;width:clamp(18px,2.4vw,40px);animation-delay:-6s}
@keyframes ray{50%{opacity:.08;transform:skewX(-14deg) translateX(14px)}}
main{overflow-x:clip}
/* dust motes drifting in the dark room */
.gx #work>.wrap::after{content:"";position:absolute;inset:-50% 0 0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,235,200,.7),transparent),radial-gradient(1px 1px at 33% 64%,rgba(255,235,200,.6),transparent),radial-gradient(1.5px 1.5px at 58% 32%,rgba(255,235,200,.5),transparent),radial-gradient(1px 1px at 77% 81%,rgba(255,235,200,.7),transparent),radial-gradient(2px 2px at 89% 12%,rgba(255,235,200,.4),transparent),radial-gradient(1px 1px at 45% 92%,rgba(255,235,200,.6),transparent);
  background-size:420px 420px;animation:motes 40s linear infinite}
@keyframes motes{to{background-position:60px -420px}}
/* cursor ring that trails the pointer and opens up over links */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);z-index:60;pointer-events:none;opacity:0;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s,border-color .3s,background .3s;mix-blend-mode:difference;border-color:rgba(255,255,255,.85)}
.cursor.on{opacity:1}
.cursor.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.12)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (prefers-reduced-motion:reduce){.dust,.rays,.cursor{display:none}.gx #work>.wrap::after{animation:none}}
/* every light zone carries its own backdrop, so dark headings never sit on the dark tone of a neighbour */
.fxon #pricing,.fxon #faq{background:var(--bg)}
.fxon #reviews{background:var(--bg-alt)}
.fxon #contact{background:var(--sun-soft)}
.fxon #pricing,.fxon #reviews,.fxon #faq,.fxon #contact{position:relative;z-index:1}

/* the row is moved sideways (wheel, trackpad, drag, arrows); vertical gestures keep scrolling the page */
.gx .gallery{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.gx .gallery.dragging{cursor:grabbing}
.gx .gallery.dragging .slide{transition:none}
.gx .gallery img{-webkit-user-drag:none;user-select:none}
/* keep the room controls clear of the services sheet that overlaps the room's bottom edge */
.fxon.gx .room-ui{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 78px)}

@media (max-width:420px){.logo{font-size:18px}.logo em{font-size:19px}}

/* ---------- 3D DNA prologue: a dark, cinematic opening. The camera dives into one glowing base pair,
   a warm flash opens into the light site below. ---------- */
.prologue{position:relative;height:230svh;background:#0B0B0E;color:#F5F5F2;--p:0}
.pro-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 60% at 70% 45%,#1A1A21 0,#0D0D11 55%,#060A14 100%)}
.pro-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.pro-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,8,11,.82) 0,rgba(8,8,11,.35) 45%,transparent 70%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(4,4,6,.75))}
.pro-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;
  opacity:calc(1 - var(--p) * 3.2);transform:translateY(calc(var(--p) * -120px));will-change:opacity,transform}
.pro-label{color:rgba(245,245,242,.6)!important;margin-bottom:22px}
.pro-h{font:800 clamp(46px,7.6vw,118px)/.98 var(--f-display);letter-spacing:-.045em;margin:0;max-width:11ch;color:#F5F5F2}
.pro-h em{font:italic 500 1.08em/1 var(--f-serif);letter-spacing:-.01em;color:#C6FF3D;text-shadow:0 0 40px rgba(198,255,61,.45)}
.pro-p{margin:26px 0 0;max-width:34ch;font-size:clamp(17px,1.5vw,20px);color:rgba(245,245,242,.72)}
.pro-cap{position:absolute;z-index:2;left:50%;bottom:16vh;transform:translate(-50%,calc((1 - var(--c,0)) * 24px));margin:0;width:min(92vw,620px);text-align:center;
  font:italic 500 clamp(22px,2.6vw,34px)/1.25 var(--f-serif);color:#F5F5F2;opacity:var(--c,0);text-shadow:0 2px 30px rgba(0,0,0,.6);pointer-events:none}
.pro-hint{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font:12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,242,.6);text-decoration:none;opacity:calc(1 - var(--p) * 6)}
.pro-hint i{width:1px;height:44px;background:linear-gradient(#C6FF3D,transparent);animation:hint 2s var(--ease) infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.pro-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--f,0);
  background:radial-gradient(circle at 50% 50%,#FFF4DE 0,#FBE3BD calc(var(--f,0) * 30%),#FBF7F1 calc(var(--f,0) * 75%))}
@media (max-width:760px){.prologue{height:200svh}.pro-vignette{background:linear-gradient(180deg,rgba(8,8,11,.2),rgba(8,8,11,.75) 70%),radial-gradient(120% 90% at 50% 50%,transparent 50%,rgba(4,4,6,.8))}
  .pro-copy{justify-content:flex-end;padding-bottom:22vh}}
@media (prefers-reduced-motion:reduce){.prologue{height:100svh}.pro-hint i{animation:none}}
.no-webgl .prologue{height:100svh}
.pro-cap{text-shadow:0 2px 24px rgba(4,4,6,.95),0 0 60px rgba(4,4,6,.9)}
.pro-cap::before{content:"";position:absolute;inset:-40% -20%;z-index:-1;background:radial-gradient(closest-side,rgba(6,6,9,.7),transparent)}


/* ================= Deep navy theme: the whole site lives inside the DNA world =================
   One fixed WebGL canvas (the DNA) sits behind every section; sections are transparent or glass. */
.dna-gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
.pro-stage{background:transparent}
.btn-primary{background:var(--sun);color:#0B0B0E;border-color:var(--sun)}
.btn-primary:hover{box-shadow:0 0 0 6px rgba(198,255,61,.18),0 0 40px rgba(198,255,61,.35)}
.btn-ghost{border-color:rgba(245,245,242,.35)}
.window,.plan,.faq details,.contact,.b-input,.chip:not([aria-checked="true"]){backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.window{box-shadow:0 0 0 1px rgba(183,156,255,.12),0 40px 90px -40px rgba(0,0,0,.8),0 0 80px -30px rgba(183,156,255,.25)}
.status b{background:#5E5E68}
.slide .shot{box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.gx #work>.wrap{background:color-mix(in srgb,var(--room,#131318) 62%,transparent)}
.fxon #services{background:rgba(18,18,23,.62);box-shadow:0 -40px 80px -30px rgba(0,0,0,.6),0 -1px 0 rgba(183,156,255,.18)}
.fxon #process::before{background:radial-gradient(80% 60% at 50% 30%,rgba(26,22,40,.72),rgba(6,6,9,.86))}
.fxon #process.lit{color:#F5F5F2}
.fxon #process.lit .label,.fxon #process.lit .sec-head p{color:rgba(245,245,242,.65)}
.fxon #process.lit .steps li{background:rgba(24,24,30,.78);color:#F5F5F2;box-shadow:0 0 0 1px rgba(183,156,255,.14)}
.fxon #process.lit .steps li::before{color:#34343E}
.fxon #process.lit .steps li p{color:rgba(245,245,242,.7)}
.fxon #process.lit .steps::after{background:#26262E}
.plan:hover{box-shadow:0 30px 60px -36px rgba(0,0,0,.8),0 0 0 1px rgba(183,156,255,.35)}
.hero::after{display:none}
.sec-head h2 em,.hero h1 em{color:var(--sun);text-shadow:0 0 36px rgba(198,255,61,.35)}
.label{color:var(--cyan)}
.top{background:rgba(11,11,14,.62)}
.top.scrolled{border-bottom-color:rgba(183,156,255,.14)}
.pro-flash{background:radial-gradient(circle at 50% 50%,rgba(236,228,255,.95) 0,rgba(183,156,255,.55) 25%,rgba(11,11,14,0) 70%)}
.dna-tip{position:fixed;z-index:40;left:0;top:0;pointer-events:none;font:11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);
  padding:7px 10px;border:1px solid rgba(183,156,255,.35);border-radius:999px;background:rgba(11,11,14,.7);opacity:0;transition:opacity .3s;white-space:nowrap}

.prologue{background:transparent}
.contact{--bg:#F5F5F2;--ink:#141418;background:rgba(20,20,26,.74);box-shadow:0 0 0 1px rgba(183,156,255,.2),0 0 140px -50px rgba(183,156,255,.45)}
.contact .copy,.contact button:not(.btn){color:#F5F5F2;border-color:rgba(245,245,242,.3)}
.fxon #pricing,.fxon #faq,.fxon #reviews{background:transparent}
.fxon #contact{background:radial-gradient(60% 50% at 70% 60%,rgba(198,255,61,.10),transparent 70%)}
.fxon #process::before{background:radial-gradient(80% 60% at 50% 30%,rgba(26,22,40,.35),rgba(6,6,9,.55))}

/* ---------- DNA intro (once per session) ---------- */
.intro{position:fixed;inset:0;z-index:200;background:#060608;display:none;animation:introFail .01s 14s forwards}
html.intro-on .intro{display:block}
html.intro-on{overflow:hidden}
html.intro-on .top,html.intro-on .cursor{opacity:0}
.intro.out{display:block;opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.intro-c{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-skip{position:absolute;top:max(18px,env(safe-area-inset-top));right:22px;cursor:pointer;font:12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,245,242,.75);background:rgba(11,11,14,.5);border:1px solid rgba(183,156,255,.35);border-radius:999px;padding:10px 14px}
.intro-skip:hover{color:#fff;border-color:var(--cyan)}
.intro-meta{position:absolute;left:24px;right:24px;bottom:max(20px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:16px;
  font:11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(183,156,255,.75)}
@keyframes introFail{to{visibility:hidden;opacity:0}}
html.intro-on .pro-copy,html.intro-on .pro-hint,html.intro-on .pro-cap,html.intro-on .dust{opacity:0!important}
.intro-fx{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform}

/* ---------- Intro "from the dot to the site" ---------- */
.intro{background:#0B0B0E}
.iw{position:absolute;left:50%;top:50%;width:min(760px,86vw);margin-left:calc(min(760px,86vw) / -2);transform-origin:50% 50%;
  translate:0 -50%;opacity:0;border-radius:14px;overflow:hidden;background:rgba(20,20,26,.88);box-shadow:0 0 0 1px rgba(183,156,255,.25),0 40px 120px -30px rgba(0,0,0,.8),0 0 120px -30px rgba(183,156,255,.35);pointer-events:none}
.iw-bar{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid rgba(183,156,255,.15);background:rgba(11,11,14,.6)}
.iw-bar>i{width:9px;height:9px;border-radius:50%;background:#2E2E36;flex:none}
.iw-addr{margin-left:8px;flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:rgba(24,24,30,.9);border-radius:999px;padding:4px}
.iw-st{display:inline-flex;align-items:center;gap:6px;flex:none;font:12px/1 var(--f-mono);padding:6px 9px;border-radius:999px;color:#A0A0A8;background:rgba(11,11,14,.7);transition:background .3s,color .3s}
.iw-st b{width:7px;height:7px;border-radius:50%;background:#5E5E68;transition:background .3s,box-shadow .3s}
.iw-st.on{background:rgba(198,255,61,.16);color:#DBFF8A}
.iw-st.on b{background:#C6FF3D;box-shadow:0 0 0 4px rgba(198,255,61,.25),0 0 18px #C6FF3D}
.iw-url{font:13px/1 var(--f-mono);color:#F5F5F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iw-url u{text-decoration:none;color:#5E5E68}
.iw-url span::after{content:"";display:inline-block;width:1.5px;height:1em;background:#F5F5F2;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
.iw-body{padding:clamp(14px,3vw,26px);display:grid;gap:clamp(10px,2vw,18px)}
.iw-b{border-radius:8px;background:rgba(183,156,255,.07);transition:background .5s}
.iw-nav{height:14px;width:60%}
.iw-hero{display:grid;gap:10px;padding:clamp(8px,2vw,18px) 0}
.iw-h{height:auto;min-height:clamp(30px,5vw,52px);display:flex;align-items:center;padding:0 10px;font:800 clamp(22px,4vw,42px)/1.1 var(--f-display);letter-spacing:-.03em;color:transparent;transition:color .5s,background .5s}
.iw-l{height:10px;width:72%}.iw-l.s{width:48%}
.iw-btn{height:clamp(28px,4vw,38px);width:clamp(110px,18vw,160px);border-radius:999px}
.iw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.iw-cards>div{height:clamp(46px,9vw,92px)}
.iw.lit .iw-b{background:rgba(183,156,255,.12)}
.iw.lit .iw-h{color:#F5F5F2;background:transparent}
.iw.lit .iw-btn{background:var(--sun)}
html.intro-on .top{transition:opacity .4s}
html.intro-on.intro-land .top{opacity:1}
.logo.ping i{animation:logoPing 1.2s var(--ease) 1}
@keyframes logoPing{0%{box-shadow:0 0 0 0 rgba(198,255,61,.8)}100%{box-shadow:0 0 0 14px rgba(198,255,61,0)}}
.prologue{height:120svh}
@media (max-width:760px){.prologue{height:110svh}}
html.intro-on .cursor{opacity:0!important}

/* ---------- Intro phone (replaces the browser window) ---------- */
.iph{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0;pointer-events:none;transform-origin:50% 50%}
.iph-frame{position:relative;height:min(580px,66svh);aspect-ratio:9/19;border-radius:clamp(30px,4.6svh,42px);padding:clamp(9px,1.4svh,12px);
  background:linear-gradient(160deg,#1B2A47,#0D0D11 60%);box-shadow:0 0 0 1px rgba(183,156,255,.35),0 0 0 4px rgba(14,14,18,.9),0 40px 120px -30px rgba(0,0,0,.85),0 0 140px -30px rgba(183,156,255,.45)}
.iph-notch{position:absolute;left:50%;top:clamp(14px,2svh,18px);translate:-50% 0;width:30%;height:clamp(16px,2.6svh,22px);border-radius:999px;background:#060608;z-index:3}
.iph-addr{position:absolute;z-index:3;left:8%;right:8%;bottom:clamp(16px,2.6svh,22px);display:flex;align-items:center;gap:6px;background:rgba(11,11,14,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:4px;box-shadow:0 0 0 1px rgba(183,156,255,.2)}
.iph-addr .iw-st{padding:5px 7px;font-size:10.5px}
.iph-url{font:11.5px/1 var(--f-mono);color:#F5F5F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.iph-screen{position:relative;width:100%;height:100%;border-radius:clamp(22px,3.4svh,32px);overflow:hidden;background:#131318}
.iph-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;opacity:0;transform:scale(1.06);transition:opacity .16s,transform .3s var(--ease)}
.iph-screen img.on{opacity:1;transform:none}
.iph-you{position:absolute;inset:0;padding:22% 9% 0;display:grid;align-content:start;gap:10px;opacity:0;transition:opacity .2s;background:linear-gradient(180deg,#16161B,#131318)}
.iph-you.on{opacity:1}
.iph-you .iw-b{background:rgba(183,156,255,.12)}
.iph-you .iw-nav{height:10px;width:55%}
.iph-h{font:800 clamp(22px,3.4svh,30px)/1.05 var(--f-display);letter-spacing:-.03em;color:#F5F5F2;margin:12px 0 4px;overflow-wrap:anywhere}
.iph-you .iw-l{height:8px}
.iph-you .iw-btn{height:30px;width:60%;border-radius:999px;background:var(--sun);margin-top:6px}
.iph-card{height:clamp(50px,9svh,80px)}
.iw{display:none}
.iph-screen img{object-position:14% 0}
.iph-addr{left:5%;right:5%}
.iph-url{font-size:10.5px;letter-spacing:-.02em}

/* ---------- Intro: three real client sites in a 3D fan (replaces the phone) ---------- */
.iph{display:none}
.icards{--fold:0;position:absolute;left:50%;top:50%;width:0;height:0;perspective:1600px;transform-origin:0 0;pointer-events:none}
.ic{--w:min(440px,30vw);position:absolute;left:calc(var(--w) / -2);top:calc(var(--w) * -.32);width:var(--w);margin:0;opacity:0}
.ic img{display:block;width:100%;aspect-ratio:1100/600;height:auto;object-fit:cover;object-position:0 0;border-radius:12px;
  box-shadow:0 0 0 1px rgba(183,156,255,.3),0 40px 90px -30px rgba(0,0,0,.85),0 0 90px -30px rgba(183,156,255,.4);filter:saturate(.2) brightness(.6);transition:filter .45s var(--ease)}
.ic.on img{filter:none}
.ic-tag{display:flex;align-items:center;gap:8px;margin-top:10px;font:12px/1 var(--f-mono);color:#F5F5F2;justify-content:center}
.ic.on .iw-st{background:rgba(198,255,61,.16);color:#DBFF8A}
.ic.on .iw-st b{background:#C6FF3D;box-shadow:0 0 0 4px rgba(198,255,61,.25),0 0 18px #C6FF3D}
.ic:nth-child(1){transform:translateX(calc(var(--w) * -1.02 * (1 - var(--fold)))) translateZ(calc(-160px * (1 - var(--fold)))) rotateY(calc(24deg * (1 - var(--fold))))}
.ic:nth-child(2){transform:translateZ(40px);z-index:2}
.ic:nth-child(3){transform:translateX(calc(var(--w) * 1.02 * (1 - var(--fold)))) translateZ(calc(-160px * (1 - var(--fold)))) rotateY(calc(-24deg * (1 - var(--fold))))}
@media (max-width:760px){.ic{--w:64vw}.ic:nth-child(1){transform:translateY(calc(var(--w) * -.62 * (1 - var(--fold)))) translateZ(calc(-120px * (1 - var(--fold)))) rotateX(calc(-14deg * (1 - var(--fold))))}
  .ic:nth-child(3){transform:translateY(calc(var(--w) * .62 * (1 - var(--fold)))) translateZ(calc(-120px * (1 - var(--fold)))) rotateX(calc(14deg * (1 - var(--fold))))}}
.ic-tag{opacity:calc(1 - var(--fold) * 2.5)}

/* ---------- Readability pass (01.11): text sits on solid glass, not on the busy DNA ---------- */
:root,:root[data-theme="dark"]{--muted:#B4B4BC;--line:rgba(200,200,215,.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--muted:#B4B4BC;--line:rgba(200,200,215,.2)}}
.lead,.sec-head p,.pro-p{color:#D6D6DA;text-shadow:0 1px 2px rgba(6,6,9,.9),0 0 24px rgba(6,6,9,.85)}
.label{text-shadow:0 0 12px rgba(6,6,9,.9)}
.svc{border-top:0;gap:14px}
.svc article{padding:24px 24px 26px;border:1px solid rgba(183,156,255,.14);border-radius:16px;background:rgba(18,18,23,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.svc p,.plan p,.faq details p{color:#C9C9CF}
.faq{border-top:0;display:grid;gap:10px}
.faq details{border:1px solid rgba(183,156,255,.14);border-radius:14px;background:rgba(18,18,23,.78);padding:0 22px}
.faq summary{padding:20px 0}
.plan{background:rgba(18,18,23,.82)}
.steps li{background:rgba(20,20,26,.88)}
.window{background:#131318}
@media (max-width:760px){.svc{grid-template-columns:1fr}}
.dna-gl{transition:opacity .9s var(--ease)}
.label{color:var(--sun)}

/* headings: plain reveal (the particle "galaxy" is removed) */

/* ---------- Card readability (01.11): solid raised cards, brighter text, lime accent edge ---------- */
.svc article,.plan,.faq details,.fxon #process.lit .steps li:not(.key),.steps li:not(.key),.care{
  background:linear-gradient(180deg,#1C1C23,#16161B)!important;border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 50px -30px rgba(0,0,0,.9)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.svc article{position:relative;overflow:hidden}
.svc article::before,.plan::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:linear-gradient(90deg,var(--sun),rgba(183,156,255,.7) 60%,transparent);opacity:.75}
.plan{position:relative;overflow:hidden}
.svc p,.plan p,.plan .for,.faq details p,.fxon #process.lit .steps li p,.steps li p,.care p{color:#D6D6DD!important}
.plan li{color:#ECECEF}
.svc h3,.plan h3,.steps li h3{color:#FFFFFF}
.fxon #process.lit .steps li:not(.key)::before,.steps li:not(.key)::before{color:#4A4A57!important}
.steps li.key,.fxon #process.lit .steps li.key{background:var(--sun)!important;color:#0B0B0E!important;border-color:transparent!important}
.steps li.key p,.fxon #process.lit .steps li.key p{color:#1E2408!important}
.plan:nth-child(2){border-color:rgba(198,255,61,.55)!important;box-shadow:0 0 0 1px rgba(198,255,61,.25),0 30px 70px -30px rgba(198,255,61,.25)!important}
.todo{background:#2A2A10;color:#E9FF9A;border-color:rgba(198,255,61,.55)}
.faq summary{color:#FFFFFF}
.steps li.key h3,.fxon #process.lit .steps li.key h3{color:#0B0B0E!important}
.steps li.key::before{color:#0B0B0E!important}

/* ---------- Reviews: solid readable cards ---------- */
.review{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#1C1C23,#16161B);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 50px -30px rgba(0,0,0,.9);gap:16px}
.review::before{content:"\201C";position:absolute;right:18px;top:-6px;font:italic 500 120px/1 var(--f-serif);color:rgba(198,255,61,.14);pointer-events:none}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.stars{color:var(--sun);letter-spacing:.12em;font-size:16px}
.review .todo{font-size:11px}
.review blockquote{color:#F0F0F2;font-size:25px}
.review figcaption{display:flex;align-items:center;gap:10px;color:#D6D6DD;font-weight:600}
.review .av{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--sun),#B79CFF)}
/* ---------- Back to top ---------- */
.to-top{all:unset;box-sizing:border-box;position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:45;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:var(--sun);color:#0B0B0E;box-shadow:0 10px 30px -8px rgba(198,255,61,.55),0 0 0 1px rgba(0,0,0,.2);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),box-shadow .2s}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{box-shadow:0 0 0 6px rgba(198,255,61,.2),0 14px 36px -8px rgba(198,255,61,.7)}
.to-top:focus-visible{outline:2px solid #fff;outline-offset:3px}
html.intro-on .to-top{display:none}

/* ================= Builder: realistic demo sites (real photos, real site anatomy) ================= */
.mini{aspect-ratio:16/11;background:#111}
.mini .tpl{display:grid;grid-template-rows:auto 1fr auto;font-family:var(--f-body);background:var(--pg,#fff);color:var(--tx,#141414);
  --a:#FF6A1A;--ai:#fff;--pg:#0F1114;--tx:#fff;--card:#fff;--ctx:#141414;--line:rgba(255,255,255,.12)}
.mini .tpl *{min-width:0}
/* nav */
.mini .rn{display:flex;align-items:center;gap:2.4cqw;padding:1.9cqw 3cqw;background:var(--nav,rgba(0,0,0,.0));position:relative;z-index:3;font-size:1.75cqw}
.mini .rn .lg{display:flex;align-items:center;gap:1.1cqw;font-weight:700;white-space:nowrap;overflow:hidden;max-width:46%}
.mini .rn .lg i{flex:none;width:3.4cqw;height:3.4cqw;border-radius:.9cqw;background:var(--a);color:var(--ai);display:grid;place-items:center;font:800 1.9cqw/1 var(--f-display);font-style:normal}
.mini .rn .lg b{overflow:hidden;text-overflow:ellipsis;font:700 1.95cqw/1 var(--hf,var(--f-display))}
.mini .rn nav{display:flex;gap:2.4cqw;margin-left:auto;opacity:.85}
.mini .rn .cta{background:var(--a);color:var(--ai);padding:1.1cqw 1.9cqw;border-radius:var(--rad,.8cqw);font-weight:700;white-space:nowrap}
/* hero with photo */
.mini .rh{position:relative;display:grid;grid-template-columns:1.25fr .95fr;gap:2.4cqw;align-items:end;padding:3cqw;margin:-7cqw 0 0;padding-top:9cqw;overflow:hidden;color:#fff}
.mini .rh .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1.04);animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translate(-1.5%,-1%)}}
.mini .rh .sh{position:absolute;inset:0;background:var(--shade,linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.35) 55%,rgba(0,0,0,.15)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%))}
.mini .rh .tx{position:relative;display:grid;gap:1.3cqw;align-self:center}
.mini .rh .k{font:600 1.55cqw/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--kc,var(--a))}
.mini .rh .tt{display:block;font:var(--tw,800) var(--ts,6.2cqw)/.95 var(--hf,var(--f-display));letter-spacing:var(--tl,-.03em);text-transform:var(--tu,none);overflow-wrap:anywhere;text-shadow:0 .3cqw 2cqw rgba(0,0,0,.35)}
.mini .rh p{margin:0;font-size:1.85cqw;line-height:1.45;opacity:.92;max-width:44ch}
.mini .rh .bt{display:flex;gap:1.2cqw;flex-wrap:wrap;margin-top:.4cqw}
.mini .rh .b1,.mini .rh .b2{font-size:1.75cqw;font-weight:700;padding:1.3cqw 2.2cqw;border-radius:var(--rad,.8cqw)}
.mini .rh .b1{background:var(--a);color:var(--ai)}
.mini .rh .b2{border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);backdrop-filter:blur(4px)}
/* floating widget */
.mini .wd{position:relative;background:var(--card);color:var(--ctx);border-radius:calc(var(--rad,.8cqw) * 1.6);padding:2cqw;display:grid;gap:1.2cqw;box-shadow:0 2cqw 5cqw -1cqw rgba(0,0,0,.5);font-size:1.6cqw;align-self:end}
.mini .wd small{font:600 1.4cqw/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;opacity:.6}
.mini .wd .sl{display:grid;grid-template-columns:repeat(4,1fr);gap:.8cqw}
.mini .wd .sl span{border:1px solid rgba(0,0,0,.14);border-radius:.7cqw;padding:1cqw 0;text-align:center;font:600 1.5cqw/1 var(--f-mono)}
.mini .wd .sl span.on{background:var(--a);color:var(--ai);border-color:var(--a)}
.mini .wd .go{background:var(--ctx);color:var(--card);text-align:center;padding:1.2cqw;border-radius:var(--rad,.8cqw);font-weight:700}
.mini .wd.bar{grid-column:1/-1;grid-template-columns:repeat(3,1fr) auto;padding:0;gap:0;overflow:hidden}
.mini .wd.bar span{padding:1.6cqw 2cqw;border-right:1px solid rgba(0,0,0,.08);display:grid;gap:.5cqw;font-weight:600}
.mini .wd.bar span em{font:1.3cqw/1 var(--f-mono);font-style:normal;text-transform:uppercase;letter-spacing:.08em;opacity:.55}
.mini .wd.bar .go{display:grid;place-items:center;border-radius:0;padding:0 2.6cqw;background:var(--a);color:var(--ai);border:0}
.mini .rh:has(.wd.bar){grid-template-columns:1fr}
.mini .wd.cart div{display:flex;justify-content:space-between;gap:1cqw;border-bottom:1px dashed rgba(0,0,0,.12);padding-bottom:.8cqw}
.mini .wd.cart div b{white-space:nowrap}
/* bottom strip */
.mini .rs{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:1.6cqw;padding:2cqw 3cqw;background:var(--strip,var(--pg));color:var(--tx);align-items:center;font-size:1.55cqw}
.mini .rs figure{margin:0;display:flex;align-items:center;gap:1.2cqw}
.mini .rs figure img{width:8cqw;height:5.6cqw;object-fit:cover;border-radius:.7cqw;flex:none}
.mini .rs figcaption{font-weight:600;line-height:1.2}
.mini .rs.menu,.mini .rs.info{grid-template-columns:repeat(3,1fr) 1.1fr}
.mini .tpl.t-hotel .rs,.mini .tpl.t-auto .rs{grid-template-columns:1fr 1fr 1.1fr}
.mini .rs.menu div{display:flex;align-items:baseline;gap:.8cqw;line-height:1.25}
.mini .rs.menu div i{flex:1;border-bottom:1px dotted currentColor;opacity:.35}
.mini .rs.menu div b{color:var(--a);white-space:nowrap}
.mini .rs.info div{display:flex;align-items:center;gap:1cqw;font-weight:600}
.mini .rs.info div b{font-size:2.4cqw}
.mini .rg{display:grid;grid-template-columns:auto 1fr;column-gap:1cqw;align-items:center;justify-self:end;text-align:left}
.mini .rg .st{grid-column:1/-1;color:#FBBC04;letter-spacing:.08em;font-size:1.6cqw}
.mini .rg b{font:800 3cqw/1 var(--f-display)}
.mini .rg small{opacity:.7;font-size:1.35cqw;line-height:1.2}
/* per-trade identity */
.mini .t-auto{--a:#FF6A1A;--ai:#fff;--pg:#121418;--tx:#F2F2F2;--tu:uppercase;--ts:5.8cqw;--tl:-.01em;--pos:50% 40%}
.mini .t-hotel{--a:#B8955A;--ai:#fff;--pg:#F7F3EC;--tx:#2A2318;--hf:var(--f-serif);--tw:500;--ts:7cqw;--tl:0;--kc:#F1DDB5;--rad:.3cqw;--pos:50% 60%;
  --shade:linear-gradient(0deg,rgba(20,14,6,.82),rgba(20,14,6,.25) 60%,rgba(20,14,6,.45))}
.mini .t-hotel .rh .tt{font-style:italic}
.mini .t-hotel .rh{align-items:end}
.mini .t-food{--a:#E8B04A;--ai:#1A1208;--pg:#16110D;--tx:#F7EDE2;--hf:var(--f-serif);--tw:500;--ts:6.8cqw;--tl:0;--rad:999px;--card:#FFF8EE;--ctx:#2A1B10;--pos:50% 55%}
.mini .t-food .rh .tt{font-style:italic}
.mini .t-shop{--a:#E4572E;--ai:#fff;--pg:#FFF7EC;--tx:#2B1D10;--ts:5.6cqw;--rad:1cqw;--pos:50% 30%;
  --shade:linear-gradient(90deg,rgba(26,16,6,.82),rgba(26,16,6,.35) 52%,rgba(26,16,6,.05))}
.mini .t-beauty{--a:#1C1714;--ai:#F6EEE6;--pg:#F7F1EA;--tx:#2A221D;--hf:var(--f-serif);--tw:500;--ts:7cqw;--tl:0;--kc:#F3DCC4;--rad:999px;--card:#FFFFFF;--ctx:#1C1714;--pos:40% 50%;
  --shade:linear-gradient(90deg,rgba(28,20,14,.72),rgba(28,20,14,.2) 55%,rgba(28,20,14,0))}
.mini .t-beauty .rh .tt{font-style:italic}
.mini .t-beauty .rs.menu div b,.mini .t-beauty .wd .sl span.on{color:#fff}
.mini .t-beauty .rs.menu div b{color:#8A5A3B}
@media (prefers-reduced-motion:reduce){.mini .rh .ph{animation:none}}

/* demo sites: nav sits over the photo */
.mini .tpl{position:absolute}
.mini .rn{position:absolute;inset:0 0 auto 0;color:#fff;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0))}
.mini .rn nav{opacity:.9}
.mini .rh{margin:0;padding:8.5cqw 3cqw 3cqw}
.mini .rs.info{grid-template-columns:1fr 1fr 1.1fr}
.mini .wd .sl span{padding:1cqw .2cqw;font-size:1.4cqw}
.mini .tpl{grid-template-rows:1fr auto}
.mini .rh{align-content:end;height:100%}
.mini .wd{border-radius:1.4cqw}
.mini .wd .go,.mini .rh .b1,.mini .rh .b2{border-radius:var(--rad,.8cqw)}
.mini .rs.menu{grid-template-columns:repeat(3,minmax(0,1fr)) auto;column-gap:2.4cqw}
.mini .t-beauty .rs.menu{grid-template-columns:repeat(2,minmax(0,1fr)) auto}
.mini .rs.menu div{flex-wrap:nowrap}
.mini .rs.menu div span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .rg{white-space:nowrap}
.mini .rs{padding:1.8cqw 3cqw}

/* ---------- Sound buttons ---------- */
.snd{all:unset;box-sizing:border-box;position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:45;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(22,22,27,.85);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,background .2s}
.snd:hover{border-color:var(--sun)}
.snd:focus-visible,.intro-snd:focus-visible{outline:2px solid #fff;outline-offset:3px}
.eq{display:flex;align-items:flex-end;gap:3px;height:16px}
.eq i{width:3px;height:30%;border-radius:2px;background:#A0A0A8;transition:background .2s}
.snd.on .eq i,.intro-snd.on .eq i{background:var(--sun);animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s!important}.eq i:nth-child(3){animation-delay:-.6s!important}.eq i:nth-child(4){animation-delay:-.15s!important}
@keyframes eq{0%{height:25%}100%{height:100%}}
.snd.armed:not(.on) .eq i{background:var(--sun);opacity:.6}
.intro-snd{position:absolute;top:max(18px,env(safe-area-inset-top));right:150px;display:flex;align-items:center;gap:10px;cursor:pointer;font:12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#0B0B0E;background:var(--sun);border:0;border-radius:999px;padding:10px 14px;z-index:2}
.intro-snd .eq{height:12px}.intro-snd .eq i{background:#0B0B0E}
.intro-snd.on{background:rgba(198,255,61,.18);color:var(--sun)}
html.intro-on .snd{display:none}
@media (max-width:760px){.intro-snd{right:auto;left:18px}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none!important}}

.snd{display:none!important}

/* pricing: pay now / instalments */
.paysw{display:flex;gap:8px;margin:0 0 22px}
.plans[data-pay="now"] .pay-inst,.plans[data-pay="inst"] .pay-now{display:none}
.pnote{margin:-6px 0 0;font-size:14.5px;color:var(--muted)}
.plan .price small{margin-left:2px}
.vat-note{margin:14px 0 0;font-size:14px;color:var(--muted)}
/* footer readable over the DNA, clear of the to-top button */
.foot{position:relative;z-index:1;background:rgba(11,11,14,.88);padding-bottom:96px}
.foot .wrap{padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.foot{padding-bottom:56px}.foot .wrap{padding-right:96px}}