*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0a0f1c;--ink-soft:#1a2138;
  --paper:#ffffff;--paper-warm:#f4f5f7;
  --accent:#546E7A;--accent-soft:#90A4AE;--accent-deep:#37474F;
  --accent-glow:rgba(84,110,122,0.35);
  --mint:#26A69A;--gold:#FFA726;--coral:#FF7043;--violet:#7986CB;--sky:#4FC3F7;
  --line:rgba(10,15,28,0.1);--line-soft:rgba(10,15,28,0.05);
}
html{scroll-behavior:smooth}
body{font-family:'Inter Tight',sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:0.05;mix-blend-mode:multiply;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none}
.display{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-0.035em;line-height:0.92;font-variation-settings:"opsz" 144}
.mono{font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase}
.container{max-width:1340px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}

/* nav */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 2rem;max-width:1340px;margin:0 auto;gap:1.5rem}
.logo{display:inline-grid;grid-template-columns:auto 1fr;column-gap:0.55rem;row-gap:2px;align-items:center;font-family:'Fraunces',serif;line-height:1;text-decoration:none;color:inherit}
.logo__home{display:contents;text-decoration:none;color:inherit}
.logo__mark{position:relative;width:30px;height:30px;flex-shrink:0;grid-row:1 / span 2;grid-column:1;align-self:center}
.logo__mark svg{width:100%;height:100%;animation:logoSpin 18s linear infinite}
@keyframes logoSpin{to{transform:rotate(360deg)}}
.logo__mark::after{content:'';position:absolute;inset:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px rgba(84,110,122,0.6);animation:logoPulse 2.4s ease-in-out infinite}
@keyframes logoPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(0.85);opacity:0.7}}
.logo__name{display:flex;align-items:baseline;gap:0.35rem;font-size:1.4rem;font-weight:500;letter-spacing:-0.02em;line-height:1;grid-row:1;grid-column:2}
.logo__num{font-family:'JetBrains Mono',monospace;font-size:0.62rem;font-weight:700;color:var(--accent-deep);background:rgba(84,110,122,0.12);padding:0.16rem 0.36rem;border-radius:4px;letter-spacing:0.02em;line-height:1}
.logo__by{font-family:'Inter Tight',sans-serif;font-size:0.7rem;font-weight:500;color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;gap:2px;line-height:1;transition:color 0.2s;justify-self:start;grid-row:2;grid-column:2;margin-top:1px}
.logo__by:hover{color:var(--accent)}
.logo__by-arrow{display:inline-block;font-size:0.7rem;transition:transform 0.2s}
.logo__by:hover .logo__by-arrow{transform:translate(2px,-2px)}
.footer__brand p a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--accent);transition:color 0.2s}
.footer__brand p a:hover{color:var(--accent)}
.nav__links{display:flex;gap:1.6rem;align-items:center;list-style:none;font-size:0.9rem;font-weight:500}
.nav__links a{transition:color 0.2s}
.nav__links a:hover{color:var(--accent)}
.nav__right{display:flex;align-items:center;gap:0.7rem}
.lang-switcher{display:flex;align-items:center;gap:2px;background:var(--paper-warm);border:1px solid var(--line);border-radius:99px;padding:3px}
.lang-btn{font-family:'JetBrains Mono',monospace;font-size:0.62rem;font-weight:700;letter-spacing:0.08em;padding:0.3rem 0.55rem;border-radius:99px;cursor:pointer;transition:all .2s;color:var(--ink-soft);border:none;background:transparent}
.lang-btn.active{background:var(--ink);color:var(--paper)}
.lang-btn:hover:not(.active){background:rgba(10,15,28,0.06);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.7rem 1.25rem;background:var(--ink);color:var(--paper);border-radius:999px;font-size:0.85rem;font-weight:500;transition:transform 0.25s,background 0.25s;cursor:pointer}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn:hover{background:var(--accent);transform:translateY(-1px)}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--paper)}
.btn--accent{background:var(--accent)}
.btn--accent:hover{background:var(--ink)}

/* === TOP CONTACT BAR === */
.topbar{
  position:relative;z-index:81;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__inner{
  max-width:1340px;margin:0 auto;
  padding:0.45rem 2rem;
  display:flex;align-items:center;justify-content:flex-end;
  gap:0.85rem;
  font-size:0.78rem;
}
.topbar__link{
  display:inline-flex;align-items:center;gap:0.45rem;
  color:var(--ink-soft);
  text-decoration:none;
  font-weight:500;
  letter-spacing:0.01em;
  transition:color 0.2s;
}
.topbar__link:hover{color:var(--accent)}
.topbar__link svg{
  width:13px;height:13px;flex-shrink:0;
  color:var(--ink-soft);
  transition:color 0.2s;
}
.topbar__link:hover svg{color:var(--accent)}
.topbar__link--phone{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:0.76rem;font-weight:600}
.topbar__link--phone .topbar__pulse{
  width:6px;height:6px;border-radius:50%;
  background:#26A69A;
  box-shadow:0 0 6px rgba(38,166,154,0.7);
  animation:topbarPulse 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes topbarPulse{0%,100%{opacity:1}50%{opacity:0.45}}
.topbar__sep{
  width:1px;height:14px;
  background:var(--line);
  flex-shrink:0;
}

/* HERO */
.hero{padding:5rem 0 7rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-300px;left:50%;transform:translateX(-50%);width:1200px;height:800px;background:radial-gradient(ellipse,rgba(84,110,122,0.08),transparent 60%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:4rem;align-items:center}
.hero__tag{display:inline-flex;align-items:center;gap:0.6rem;padding:0.4rem 0.9rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,0.5);margin-bottom:2rem}
.hero__tag .pulse{width:8px;height:8px;background:var(--accent);border-radius:50%;position:relative}
.hero__tag .pulse::before{content:'';position:absolute;inset:-4px;border:1px solid var(--accent);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:0.8}100%{transform:scale(2.5);opacity:0}}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.4rem)}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__sub{font-size:1.12rem;max-width:50ch;color:var(--ink-soft);margin-top:1.5rem;margin-bottom:1.6rem;line-height:1.55}
.hero__sub strong{color:var(--ink);font-weight:600}
.hero__chips{display:flex;flex-wrap:wrap;gap:0.55rem;margin-bottom:2rem}
.chip{display:inline-flex;align-items:center;gap:0.45rem;padding:0.45rem 0.85rem;background:var(--paper-warm);border:1px solid var(--line);border-radius:99px;font-size:0.83rem;font-weight:500}
.chip svg{width:14px;height:14px;color:var(--accent)}
.hero__ctas{display:flex;gap:0.7rem;flex-wrap:wrap}

/* HERO SCENE — real screens with rotating playlists + 3D perspective */
.scene{position:relative;width:100%;aspect-ratio:1/1;max-width:600px;margin:0 auto;perspective:1400px;perspective-origin:50% 40%}
.scene__bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(84,110,122,0.08),transparent 60%);pointer-events:none}
.scene__bg-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(10,15,28,0.08) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(circle at center,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(circle at center,#000 0%,transparent 70%);pointer-events:none}

/* Connection layer */
.scene__connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.scene__line{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 5;opacity:0.4;stroke-linecap:round;animation:lineFlow 6s linear infinite}
@keyframes lineFlow{to{stroke-dashoffset:-40}}

/* Central control hub */
.scene__hub{position:absolute;top:50%;left:50%;width:36%;background:var(--ink);border-radius:14px;padding:0.8rem 0.95rem;color:var(--paper);box-shadow:0 30px 60px -15px rgba(10,15,28,0.4),0 0 0 1px rgba(255,255,255,0.05),inset 0 1px 0 rgba(255,255,255,0.08);z-index:5;transform:translate(-50%,-50%);animation:hubFloat 6s ease-in-out infinite}
@keyframes hubFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
.scene__hub-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem;padding-bottom:0.55rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.scene__hub-brand{display:flex;align-items:center;gap:0.35rem;font-family:'Fraunces',serif;font-size:0.78rem;font-weight:500}
.scene__hub-mark{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(84,110,122,0.7);animation:hubPulse 2s ease-in-out infinite}
@keyframes hubPulse{0%,100%{opacity:1}50%{opacity:0.5}}
.scene__hub-num{font-family:'JetBrains Mono',monospace;font-size:0.5rem;font-weight:700;color:var(--accent-soft);background:rgba(84,110,122,0.2);padding:0.1rem 0.3rem;border-radius:3px;letter-spacing:0.04em}
.scene__hub-live{display:inline-flex;align-items:center;gap:0.25rem;font-family:'JetBrains Mono',monospace;font-size:0.5rem;color:var(--mint);letter-spacing:0.08em;font-weight:600;text-transform:uppercase}
.scene__hub-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 5px rgba(38,166,154,0.8);animation:hubPulse 1.4s ease-in-out infinite}
.scene__hub-rows{display:flex;flex-direction:column;gap:0.35rem}
.scene__hub-row{display:flex;align-items:center;justify-content:space-between;font-size:0.65rem;padding:0.25rem 0.4rem;background:rgba(255,255,255,0.04);border-radius:5px;font-family:'JetBrains Mono',monospace}
.scene__hub-row-label{display:flex;align-items:center;gap:0.35rem;color:rgba(255,255,255,0.7)}
.scene__hub-row-dot{width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 4px rgba(38,166,154,0.6);flex-shrink:0}
.scene__hub-row-val{color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums;font-size:0.62rem}

/* === SCREEN — physical device with playlist === */
.screen{position:absolute;background:#000;border-radius:8px;padding:5px;box-shadow:0 24px 50px -18px rgba(10,15,28,0.35),0 0 0 1px rgba(0,0,0,0.6);z-index:3;transform-style:preserve-3d}
/* The "screen face" inside the bezel */
.screen__face{position:relative;width:100%;height:100%;border-radius:4px;overflow:hidden;background:#000}
/* Each slide is absolutely positioned and uses opacity transition for cross-fade */
.screen__slide{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transition:opacity 0.6s ease-in-out}
.screen__slide.is-active{opacity:1}
/* Status badge bottom of bezel */
.screen__label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0.3rem;font-family:'JetBrains Mono',monospace;font-size:0.5rem;color:var(--ink-soft);letter-spacing:0.04em;font-weight:600;text-transform:uppercase;background:var(--paper);padding:0.18rem 0.5rem;border-radius:99px;border:1px solid var(--line);white-space:nowrap;z-index:3;box-shadow:0 4px 10px -4px rgba(10,15,28,0.15)}
.screen__status{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 4px rgba(38,166,154,0.8);flex-shrink:0;animation:hubPulse 2s ease-in-out infinite}

/* === Screen 1: FAST FOOD MENU BOARD (top-left, landscape, slight 3D tilt) === */
.screen--food{top:6%;left:0;width:33%;aspect-ratio:16/10;transform:rotateY(8deg) rotateX(-2deg);animation:floatA 7s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:rotateY(8deg) rotateX(-2deg) translateY(0)}50%{transform:rotateY(8deg) rotateX(-2deg) translateY(-5px)}}

/* Slide A1: Menu list */
.food-menu{background:linear-gradient(135deg,#d32f2f 0%,#b71c1c 100%);padding:7px 9px;color:#fff;height:100%;justify-content:space-between}
.food-menu__title{font-family:'Fraunces',serif;font-size:0.6rem;font-weight:600;letter-spacing:-0.01em;line-height:1;margin-bottom:3px;font-style:italic}
.food-menu__list{display:flex;flex-direction:column;gap:1px;font-size:0.42rem;font-family:'Inter Tight',sans-serif}
.food-menu__item{display:flex;justify-content:space-between;border-bottom:0.5px dashed rgba(255,255,255,0.25);padding:1px 0}
.food-menu__item-name{font-weight:500}
.food-menu__item-price{font-family:'JetBrains Mono',monospace;font-size:0.4rem;font-weight:700;color:#ffeb3b}

/* Slide A2: Combo of the day with burger illustration */
.food-combo{background:linear-gradient(160deg,#ff6f00 0%,#e65100 100%);padding:7px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.food-combo__badge{font-family:'JetBrains Mono',monospace;font-size:0.38rem;letter-spacing:0.1em;background:rgba(0,0,0,0.25);padding:1px 5px;border-radius:99px;margin-bottom:3px;text-transform:uppercase;font-weight:700}
.food-combo__title{font-family:'Fraunces',serif;font-size:0.78rem;font-style:italic;font-weight:600;line-height:1;margin-bottom:2px}
.food-combo__sub{font-family:'Inter Tight',sans-serif;font-size:0.38rem;margin-bottom:4px;opacity:0.9}
.food-combo__price{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;line-height:1;letter-spacing:-0.04em;color:#ffeb3b;text-shadow:0 2px 6px rgba(0,0,0,0.3)}

/* Slide A3: Promo "Buy 1 get 1" */
.food-promo{background:linear-gradient(135deg,#1a1a1a 0%,#3d2817 100%);padding:7px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.food-promo__txt1{font-family:'Fraunces',serif;font-size:0.5rem;font-weight:400;line-height:1;margin-bottom:2px;letter-spacing:0.02em;color:#ff9800}
.food-promo__txt2{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;line-height:1;font-style:italic;letter-spacing:-0.03em}
.food-promo__txt3{font-family:'JetBrains Mono',monospace;font-size:0.4rem;letter-spacing:0.08em;margin-top:3px;opacity:0.7;text-transform:uppercase}

/* === Screen 2: MALL BILLBOARD (top-right, vertical/portrait, 3D tilt) === */
.screen--billboard{top:0;right:4%;width:18%;aspect-ratio:9/16;transform:rotateY(-8deg) rotateX(-2deg);animation:floatB 8s ease-in-out infinite}
@keyframes floatB{0%,100%{transform:rotateY(-8deg) rotateX(-2deg) translateY(0)}50%{transform:rotateY(-8deg) rotateX(-2deg) translateY(-4px)}}

.bill-sale{background:linear-gradient(160deg,#000 0%,#1a0a2e 100%);padding:8px 4px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.bill-sale__top{font-family:'Fraunces',serif;font-size:0.65rem;font-weight:600;font-style:italic;letter-spacing:-0.01em;line-height:1;color:#fff}
.bill-sale__pct{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;line-height:1;color:#FFA726;letter-spacing:-0.05em;text-shadow:0 2px 10px rgba(255,167,38,0.5);margin:4px 0}
.bill-sale__sub{font-family:'JetBrains Mono',monospace;font-size:0.38rem;letter-spacing:0.1em;opacity:0.85;text-transform:uppercase}

.bill-perfume{background:linear-gradient(160deg,#1a0033 0%,#4a148c 50%,#7c4dff 100%);padding:6px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.bill-perfume__brand{font-family:'JetBrains Mono',monospace;font-size:0.4rem;letter-spacing:0.15em;opacity:0.85;text-transform:uppercase;font-weight:600}
.bill-perfume__name{font-family:'Fraunces',serif;font-size:0.78rem;font-weight:400;font-style:italic;margin:3px 0;letter-spacing:-0.01em;line-height:1}
.bill-perfume__bottle{width:18px;height:30px;border:1.5px solid #fff;border-radius:3px;margin:3px auto;position:relative;background:linear-gradient(180deg,transparent 30%,rgba(255,255,255,0.15) 100%)}
.bill-perfume__bottle::before{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:6px;height:3px;background:#fff;border-radius:1px}
.bill-perfume__cta{font-family:'JetBrains Mono',monospace;font-size:0.38rem;letter-spacing:0.08em;margin-top:3px;text-transform:uppercase}

.bill-tech{background:linear-gradient(160deg,#0a1929 0%,#1976d2 100%);padding:6px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.bill-tech__brand{font-family:'JetBrains Mono',monospace;font-size:0.42rem;letter-spacing:0.1em;text-transform:uppercase;opacity:0.85;font-weight:700}
.bill-tech__name{font-family:'Fraunces',serif;font-size:0.7rem;font-weight:600;letter-spacing:-0.02em;line-height:1;margin:3px 0}
.bill-tech__price{font-family:'Fraunces',serif;font-size:0.95rem;font-weight:500;color:#4FC3F7;letter-spacing:-0.03em}
.bill-tech__price small{font-family:'Inter Tight',sans-serif;font-size:0.4rem;opacity:0.7}

/* === Screen 3: GAS STATION PRICE BOARD (right, square-ish, 3D tilt) === */
.screen--gas{bottom:22%;right:0;width:24%;aspect-ratio:1/1;transform:rotateY(-8deg);animation:floatC 9s ease-in-out infinite}
@keyframes floatC{0%,100%{transform:rotateY(-8deg) translateY(0)}50%{transform:rotateY(-8deg) translateY(-6px)}}

.gas-prices{background:#0a1929;padding:6px;color:#fff;height:100%;justify-content:center}
.gas-prices__head{font-family:'JetBrains Mono',monospace;font-size:0.4rem;letter-spacing:0.1em;color:#90A4AE;text-transform:uppercase;text-align:center;margin-bottom:4px;font-weight:600}
.gas-prices__list{display:flex;flex-direction:column;gap:2px;font-family:'JetBrains Mono',monospace}
.gas-prices__row{display:flex;justify-content:space-between;align-items:baseline;padding:1px 4px;background:rgba(255,255,255,0.04);border-radius:2px}
.gas-prices__row-fuel{font-size:0.42rem;font-weight:700;letter-spacing:0.04em}
.gas-prices__row-fuel--95{color:#FFA726}
.gas-prices__row-fuel--98{color:#FF7043}
.gas-prices__row-fuel--diesel{color:#90A4AE}
.gas-prices__row-fuel--gpl{color:#00bcd4}
.gas-prices__row-price{font-family:'Fraunces',serif;font-size:0.65rem;font-weight:600;font-variant-numeric:tabular-nums;color:#fff}

.gas-coffee{background:linear-gradient(135deg,#4e342e 0%,#3e2723 100%);padding:6px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.gas-coffee__top{font-family:'JetBrains Mono',monospace;font-size:0.38rem;letter-spacing:0.1em;text-transform:uppercase;opacity:0.7;margin-bottom:2px}
.gas-coffee__title{font-family:'Fraunces',serif;font-size:0.72rem;font-weight:500;font-style:italic;line-height:1;margin-bottom:2px}
.gas-coffee__cup{width:16px;height:14px;border:1.5px solid #d7ccc8;border-top:none;border-radius:0 0 4px 4px;position:relative;margin:3px auto}
.gas-coffee__cup::after{content:'';position:absolute;top:-2px;left:1px;right:1px;height:2px;background:#FFA726;border-radius:1px}
.gas-coffee__cup::before{content:'';position:absolute;right:-4px;top:3px;width:4px;height:6px;border:1.5px solid #d7ccc8;border-left:none;border-radius:0 4px 4px 0}
.gas-coffee__price{font-family:'Fraunces',serif;font-size:0.85rem;font-weight:600;color:#FFA726;letter-spacing:-0.02em;margin-top:2px}

.gas-wash{background:linear-gradient(160deg,#01579b 0%,#0288d1 100%);padding:6px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.gas-wash__title{font-family:'Fraunces',serif;font-size:0.68rem;font-weight:500;font-style:italic;letter-spacing:-0.01em;line-height:1;margin-bottom:3px}
.gas-wash__pct{font-family:'Fraunces',serif;font-size:1rem;font-weight:600;color:#fff;letter-spacing:-0.03em;line-height:1}
.gas-wash__sub{font-family:'JetBrains Mono',monospace;font-size:0.38rem;letter-spacing:0.08em;margin-top:2px;opacity:0.85;text-transform:uppercase}

/* === Screen 4: OFFICE / POS COUNTER (bottom-left, landscape, 3D tilt) === */
.screen--counter{bottom:4%;left:7%;width:32%;aspect-ratio:16/10;transform:rotateY(8deg) rotateX(2deg);animation:floatD 7.5s ease-in-out infinite}
@keyframes floatD{0%,100%{transform:rotateY(8deg) rotateX(2deg) translateY(0)}50%{transform:rotateY(8deg) rotateX(2deg) translateY(-5px)}}

/* Slide D1: POS sale total */
.counter-sale{background:#fff;padding:6px 8px;color:#1a1a1a;height:100%;justify-content:space-between;border:1px solid #ddd}
.counter-sale__head{display:flex;justify-content:space-between;align-items:center}
.counter-sale__brand{font-family:'Fraunces',serif;font-size:0.55rem;font-weight:600;font-style:italic;color:#37474F}
.counter-sale__time{font-family:'JetBrains Mono',monospace;font-size:0.38rem;color:#90A4AE;letter-spacing:0.04em}
.counter-sale__items{display:flex;flex-direction:column;gap:1px;font-family:'JetBrains Mono',monospace;font-size:0.42rem;margin:2px 0;padding:2px 0;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd}
.counter-sale__item{display:flex;justify-content:space-between;color:#546E7A}
.counter-sale__total{display:flex;justify-content:space-between;align-items:baseline}
.counter-sale__total-label{font-family:'JetBrains Mono',monospace;font-size:0.45rem;color:#546E7A;letter-spacing:0.08em;text-transform:uppercase;font-weight:700}
.counter-sale__total-val{font-family:'Fraunces',serif;font-size:0.95rem;font-weight:600;color:#1a1a1a;letter-spacing:-0.02em}

/* Slide D2: Thank you message */
.counter-thanks{background:linear-gradient(135deg,#1b5e20 0%,#2e7d32 100%);padding:6px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.counter-thanks__check{width:22px;height:22px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:3px;background:rgba(255,255,255,0.1)}
.counter-thanks__check::before{content:'';width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.counter-thanks__title{font-family:'Fraunces',serif;font-size:0.78rem;font-weight:500;font-style:italic;line-height:1;margin-bottom:2px}
.counter-thanks__sub{font-family:'JetBrains Mono',monospace;font-size:0.38rem;letter-spacing:0.1em;opacity:0.85;text-transform:uppercase}

/* Slide D3: Loyalty card promo */
.counter-loyalty{background:linear-gradient(135deg,#37474F 0%,#546E7A 100%);padding:6px;color:#fff;height:100%;align-items:center;justify-content:center;text-align:center}
.counter-loyalty__badge{font-family:'JetBrains Mono',monospace;font-size:0.38rem;letter-spacing:0.1em;background:rgba(255,255,255,0.15);padding:1px 5px;border-radius:99px;margin-bottom:3px;font-weight:700;text-transform:uppercase}
.counter-loyalty__title{font-family:'Fraunces',serif;font-size:0.72rem;font-weight:500;font-style:italic;line-height:1;margin-bottom:2px}
.counter-loyalty__points{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;color:#FFA726;letter-spacing:-0.03em}
.counter-loyalty__sub{font-family:'JetBrains Mono',monospace;font-size:0.38rem;letter-spacing:0.06em;opacity:0.7;margin-top:2px}

/* audience strip */
.audience-strip{padding:2.3rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-warm)}
.audience-strip__inner{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.audience-strip__label{flex-shrink:0;color:var(--ink-soft)}
.audience-strip__list{display:flex;gap:2.2rem;flex-wrap:wrap;align-items:center}
.audience-item{display:flex;align-items:center;gap:0.55rem;font-size:0.93rem;color:var(--ink)}
.audience-item svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}

/* sections */
.section{padding:6rem 0;position:relative}
.section__header{margin-bottom:4rem;display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:end}
.section__eyebrow{color:var(--accent)}
.section__title{font-size:clamp(2.2rem,5vw,3.8rem)}
.section__title em{font-style:italic;color:var(--accent)}
.section__intro{color:var(--ink-soft);font-size:1.05rem;max-width:54ch}

/* ECOSYSTEM SECTION — the main wow */
.ecosystem{position:relative;background:var(--ink);color:var(--paper);border-radius:32px;padding:5rem 4rem;overflow:hidden}
.ecosystem::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(84,110,122,0.18),transparent 50%),radial-gradient(circle at 80% 100%,rgba(79,195,247,0.12),transparent 50%),radial-gradient(circle at 100% 30%,rgba(255,167,38,0.06),transparent 40%);pointer-events:none}
.ecosystem__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:center}
.ecosystem__intro{position:relative}
.ecosystem__eyebrow{color:var(--accent-soft);margin-bottom:1.2rem;display:block}
.ecosystem__title{font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1.02;letter-spacing:-0.03em;margin-bottom:1.5rem}
.ecosystem__title em{font-style:italic;color:var(--accent)}
.ecosystem__text{color:rgba(255,255,255,0.72);font-size:1.05rem;line-height:1.6;margin-bottom:1.5rem;max-width:42ch}
.ecosystem__pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.45rem 0.9rem;background:rgba(84,110,122,0.16);border:1px solid rgba(84,110,122,0.35);border-radius:99px;font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--accent-soft);letter-spacing:0.08em;text-transform:uppercase}

/* === IRIS STUDIO DEMO — browser interface with drag & drop === */
.studio{position:relative;width:100%;max-width:660px;margin-left:auto;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(10,15,28,0.22),0 0 0 1px rgba(10,15,28,0.06);font-family:'Inter Tight',sans-serif}

/* Browser chrome */
.studio__chrome{display:flex;align-items:center;gap:0.8rem;padding:0.6rem 0.9rem;background:#f4f5f7;border-bottom:1px solid rgba(10,15,28,0.06)}
.studio__dots{display:flex;gap:0.35rem;flex-shrink:0}
.studio__dots span{width:10px;height:10px;border-radius:50%;background:#d6d8db}
.studio__url{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:#6b7177;letter-spacing:0.02em;background:#fff;border:1px solid rgba(10,15,28,0.08);border-radius:6px;padding:0.3rem 0.6rem}
.studio__url span{color:var(--accent-deep);font-weight:600}
.studio__user{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-soft));flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:0.65rem;color:#fff;font-weight:600}

/* Main grid */
.studio__body{display:grid;grid-template-columns:130px 1fr;min-height:380px}

/* === SIDEBAR === */
.studio__sidebar{background:#fafbfc;border-right:1px solid rgba(10,15,28,0.06);padding:0.85rem 0.7rem;display:flex;flex-direction:column;gap:0.85rem}
.studio__sidebar-label{font-family:'JetBrains Mono',monospace;font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:#90A4AE;font-weight:600;padding:0 0.3rem}
.studio__nav{display:flex;flex-direction:column;gap:0.15rem}
.studio__nav-item{display:flex;align-items:center;gap:0.45rem;padding:0.36rem 0.45rem;border-radius:6px;font-size:0.72rem;color:#546E7A;font-weight:500;cursor:default;position:relative}
.studio__nav-item svg{width:13px;height:13px;flex-shrink:0;color:#90A4AE}
.studio__nav-item.is-current{background:rgba(84,110,122,0.1);color:var(--accent-deep)}
.studio__nav-item.is-current svg{color:var(--accent)}
.studio__nav-item .dot{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 4px rgba(38,166,154,0.7)}

/* Library section */
.studio__lib{display:flex;flex-direction:column;gap:0.4rem;border-top:1px solid rgba(10,15,28,0.06);padding-top:0.85rem;flex:1}
.studio__lib-card{background:#fff;border:1px solid rgba(10,15,28,0.08);border-radius:7px;padding:4px;display:flex;flex-direction:column;gap:0.3rem;cursor:default;transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;position:relative}
.studio__lib-card.is-active{border-color:var(--accent);box-shadow:0 6px 14px -4px rgba(84,110,122,0.35),0 0 0 2px rgba(84,110,122,0.15);transform:translateY(-2px)}
.studio__lib-card.is-active::after{content:'';position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(84,110,122,0.6);animation:libPulse 1.4s ease-in-out infinite}
@keyframes libPulse{0%,100%{opacity:1}50%{opacity:0.5}}
.studio__lib-thumb{width:100%;aspect-ratio:16/10;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-size:0.85rem;font-weight:600;font-style:italic;line-height:1;letter-spacing:-0.02em;overflow:hidden;position:relative}
.studio__lib-thumb-1{background:linear-gradient(160deg,#000 0%,#1a0033 60%,#FF7043 100%)}
.studio__lib-thumb-1 .pct{font-size:1.15rem;color:#FFA726;font-weight:600;letter-spacing:-0.04em;text-shadow:0 1px 4px rgba(0,0,0,0.4)}
.studio__lib-thumb-2{background:linear-gradient(135deg,#2a1810 0%,#5c3e2a 100%);color:#f4ead5;font-size:0.7rem}
.studio__lib-thumb-3{background:linear-gradient(135deg,#1b5e20 0%,#2e7d32 100%);font-size:0.75rem}
.studio__lib-name{font-family:'JetBrains Mono',monospace;font-size:0.52rem;color:#546E7A;letter-spacing:0.04em;font-weight:600;padding:0 2px;text-transform:uppercase;line-height:1.2}

/* === MAIN === */
.studio__main{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:0.7rem;position:relative;overflow:hidden}
.studio__main-head{display:flex;align-items:center;justify-content:space-between;gap:0.7rem;padding-bottom:0.55rem;border-bottom:1px solid rgba(10,15,28,0.06)}
.studio__title{font-family:'Fraunces',serif;font-size:0.95rem;font-weight:500;letter-spacing:-0.015em;color:var(--ink)}
.studio__title em{font-style:italic;color:var(--accent)}
.studio__live{display:inline-flex;align-items:center;gap:0.3rem;font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:var(--mint);letter-spacing:0.08em;font-weight:600;text-transform:uppercase}
.studio__live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 5px rgba(38,166,154,0.7);animation:libPulse 1.4s ease-in-out infinite}

/* DROP ZONE */
.studio__drop{position:relative;border:1.5px dashed rgba(10,15,28,0.15);border-radius:10px;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;background:#fafbfc;transition:border-color 0.4s,background 0.4s,box-shadow 0.4s;overflow:hidden}
.studio__drop.is-receiving{border-color:var(--accent);border-style:solid;background:rgba(84,110,122,0.05);box-shadow:inset 0 0 0 3px rgba(84,110,122,0.08),0 8px 20px -8px rgba(84,110,122,0.25)}
.studio__drop-placeholder{font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:#90A4AE;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;text-align:center;line-height:1.4;transition:opacity 0.3s}
.studio__drop.is-receiving .studio__drop-placeholder{opacity:0}

/* The "ghost" creative that flies from sidebar to drop zone */
.studio__ghost{position:absolute;width:50px;aspect-ratio:16/10;border-radius:5px;opacity:0;pointer-events:none;z-index:10;box-shadow:0 8px 20px -4px rgba(10,15,28,0.3),0 0 0 1.5px rgba(255,255,255,0.6);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-size:0.55rem;font-weight:600;font-style:italic;transform:scale(1) translate(0,0)}
.studio__ghost.is-flying{animation:ghostFly 2.4s cubic-bezier(0.5,0,0.3,1) forwards}
@keyframes ghostFly{
  0%{opacity:0;transform:scale(1) translate(-130px,90px) rotate(-3deg)}
  10%{opacity:1;transform:scale(1.05) translate(-130px,90px) rotate(-3deg)}
  60%{transform:scale(2.4) translate(-30px,30px) rotate(2deg)}
  90%{opacity:1;transform:scale(4.2) translate(0,0) rotate(0deg)}
  100%{opacity:0;transform:scale(4.4) translate(0,0) rotate(0deg)}
}

/* Final state of the drop zone — shows the creative landed */
.studio__landed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.4s;pointer-events:none}
.studio__landed.is-visible{opacity:1}
.studio__landed-card{width:75%;height:80%;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;font-style:italic;letter-spacing:-0.02em;line-height:1;padding:0.5rem;box-shadow:0 6px 16px -4px rgba(0,0,0,0.25)}
.studio__landed-card .top{font-size:0.75rem;font-weight:500;margin-bottom:3px}
.studio__landed-card .big{font-size:1.7rem;font-weight:600;letter-spacing:-0.04em}
.studio__landed-card .sub{font-family:'JetBrains Mono',monospace;font-size:0.42rem;letter-spacing:0.1em;font-style:normal;margin-top:3px;text-transform:uppercase;opacity:0.85;font-weight:600}

/* === SCREEN LIST === */
.studio__screens-head{display:flex;align-items:center;justify-content:space-between;margin-top:0.3rem}
.studio__screens-title{font-family:'JetBrains Mono',monospace;font-size:0.58rem;color:#546E7A;letter-spacing:0.08em;text-transform:uppercase;font-weight:600}
.studio__screens-count{font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:#90A4AE;background:rgba(84,110,122,0.08);padding:0.1rem 0.45rem;border-radius:99px;letter-spacing:0.04em;font-weight:600}
.studio__screens{display:flex;flex-direction:column;gap:0.25rem;flex:1}
.studio__screen{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:0.55rem;padding:0.32rem 0.5rem;background:#fafbfc;border:1px solid rgba(10,15,28,0.04);border-radius:5px;font-size:0.7rem;transition:background 0.3s,border-color 0.3s,transform 0.3s}
.studio__screen.is-delivered{background:rgba(38,166,154,0.06);border-color:rgba(38,166,154,0.2)}
.studio__screen-icon{width:14px;height:14px;border-radius:50%;background:#e0e3e7;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.3s}
.studio__screen-icon::before{content:'';width:6px;height:6px;border-radius:50%;background:#b0bec5;transition:all 0.3s}
.studio__screen.is-delivered .studio__screen-icon{background:var(--mint)}
.studio__screen.is-delivered .studio__screen-icon::before{width:8px;height:4px;border-radius:0;background:transparent;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.studio__screen-name{font-weight:500;color:#37474F;font-size:0.7rem}
.studio__screen-status{font-family:'JetBrains Mono',monospace;font-size:0.5rem;letter-spacing:0.06em;text-transform:uppercase;color:#90A4AE;font-weight:600}
.studio__screen.is-delivered .studio__screen-status{color:var(--mint)}
/* Footer bar */
.studio__foot{padding:0.55rem 1.2rem;background:#fafbfc;border-top:1px solid rgba(10,15,28,0.06);display:flex;align-items:center;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:#546E7A;letter-spacing:0.04em}
.studio__foot strong{color:var(--accent-deep);font-weight:700}
.studio__foot-dots{display:flex;gap:3px}
.studio__foot-dots span{width:5px;height:5px;border-radius:50%;background:#cfd8dc;transition:background 0.3s,box-shadow 0.3s}
.studio__foot-dots span.is-on{background:var(--mint);box-shadow:0 0 4px rgba(38,166,154,0.7)}

/* Module cards below */
.modules{display:grid;grid-template-columns:repeat(5,1fr);gap:0.9rem;margin-top:3rem}
.module-card{background:var(--paper-warm);border-radius:18px;padding:1.5rem 1.2rem;border:1px solid var(--line-soft);position:relative;overflow:hidden;transition:transform 0.3s,box-shadow 0.3s;cursor:pointer}
.module-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -25px rgba(10,15,28,0.2)}
.module-card::before{content:'';position:absolute;top:0;left:0;width:36px;height:3px;background:var(--accent);border-radius:0 0 3px 0}
.module-card[data-color="ads"]::before{background:var(--coral)}
.module-card[data-color="cms"]::before{background:var(--violet)}
.module-card[data-color="analytics"]::before{background:var(--gold)}
.module-card[data-color="devices"]::before{background:var(--sky)}
.module-card__icon{width:44px;height:44px;border-radius:11px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:transform 0.3s}
.module-card:hover .module-card__icon{transform:rotate(-6deg) scale(1.05)}
.module-card[data-color="signage"] .module-card__icon{background:var(--accent)}
.module-card[data-color="ads"] .module-card__icon{background:var(--coral)}
.module-card[data-color="cms"] .module-card__icon{background:var(--violet)}
.module-card[data-color="analytics"] .module-card__icon{background:var(--gold);color:var(--ink)}
.module-card[data-color="devices"] .module-card__icon{background:var(--sky)}
.module-card__icon svg{width:20px;height:20px}
.module-card__name{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:500;letter-spacing:-0.015em;margin-bottom:0.15rem}
.module-card__tag{font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--ink-soft);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.7rem;display:block}
.module-card p{font-size:0.82rem;color:var(--ink-soft);line-height:1.5;margin-bottom:0.8rem}
.module-card ul{list-style:none;display:flex;flex-direction:column;gap:0.3rem}
.module-card ul li{font-size:0.75rem;color:var(--ink);padding-left:0.9rem;position:relative;line-height:1.3}
.module-card ul li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;background:var(--accent);border-radius:50%}
.module-card[data-color="ads"] ul li::before{background:var(--coral)}
.module-card[data-color="cms"] ul li::before{background:var(--violet)}
.module-card[data-color="analytics"] ul li::before{background:var(--gold)}
.module-card[data-color="devices"] ul li::before{background:var(--sky)}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.feature{background:var(--paper-warm);border-radius:20px;padding:2rem;border:1px solid var(--line-soft);transition:transform 0.3s,box-shadow 0.3s,background 0.3s}
.feature:hover{transform:translateY(-4px);box-shadow:0 30px 50px -25px rgba(10,15,28,0.15);background:var(--paper)}
.feature__icon{width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;transition:background 0.3s,transform 0.3s}
.feature:hover .feature__icon{background:var(--accent);transform:rotate(-4deg)}
.feature__icon svg{width:22px;height:22px}
.feature h3{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:500;letter-spacing:-0.015em;margin-bottom:0.5rem}
.feature p{font-size:0.92rem;color:var(--ink-soft);line-height:1.55}

/* HOW IT WORKS — 3 nodes */
.howit{background:var(--ink);color:var(--paper);border-radius:32px;padding:3.5rem 3rem;position:relative;overflow:hidden}
.howit::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 90% 10%,rgba(84,110,122,0.18),transparent 40%),radial-gradient(circle at 10% 90%,rgba(124,214,177,0.1),transparent 40%);pointer-events:none}
.howit__inner{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.howit__node{padding:2rem 1.8rem;border:1px solid rgba(255,255,255,0.12);border-radius:18px;background:rgba(255,255,255,0.03);position:relative;transition:transform 0.3s,background 0.3s}
.howit__node:hover{transform:translateY(-4px);background:rgba(255,255,255,0.05)}
.howit__node-step{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--accent-soft);letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:1rem}
.howit__node-icon{width:54px;height:54px;border-radius:14px;background:rgba(84,110,122,0.15);color:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem}
.howit__node h4{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:500;margin-bottom:0.5rem;letter-spacing:-0.02em;line-height:1.1}
.howit__node h4 em{font-style:italic;color:var(--accent-soft)}
.howit__node p{font-size:0.95rem;color:rgba(255,255,255,0.65);line-height:1.5}

/* cases */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.case{background:var(--paper-warm);border-radius:24px;padding:2.2rem;border:1px solid var(--line-soft);transition:transform 0.3s,box-shadow 0.3s;position:relative;overflow:hidden}
.case:hover{transform:translateY(-4px);box-shadow:0 30px 50px -25px rgba(10,15,28,0.18)}
.case__tag{font-family:'JetBrains Mono',monospace;font-size:0.62rem;padding:0.3rem 0.7rem;background:var(--ink);color:var(--paper);border-radius:99px;letter-spacing:0.08em;font-weight:600;text-transform:uppercase;display:inline-block;margin-bottom:1.3rem}
.case h3{font-family:'Fraunces',serif;font-size:1.65rem;font-weight:500;letter-spacing:-0.02em;margin-bottom:0.7rem}
.case h3 em{font-style:italic;color:var(--accent)}
.case p{font-size:0.95rem;color:var(--ink-soft);line-height:1.55;margin-bottom:1.3rem}
.case__features{display:flex;flex-wrap:wrap;gap:0.4rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
.case__features span{font-family:'JetBrains Mono',monospace;font-size:0.66rem;padding:0.32rem 0.65rem;background:var(--paper);border:1px solid var(--line);border-radius:99px;color:var(--ink-soft);letter-spacing:0.04em}

/* pricing */
.pricing{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:stretch}
.pricing__main{background:linear-gradient(135deg,#dee3e8 0%,var(--paper-warm) 60%,#eceff1 100%);border-radius:32px;padding:3.5rem;position:relative;overflow:hidden}
.pricing__main::before{content:'';position:absolute;right:-150px;top:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(84,110,122,0.18),transparent 60%);pointer-events:none}
.pricing__main>*{position:relative}
.pricing__eyebrow{color:var(--accent);margin-bottom:1.2rem;display:block}
.pricing__price{display:flex;align-items:baseline;gap:0.6rem;margin-bottom:0.5rem;flex-wrap:wrap}
.pricing__amount{font-family:'Fraunces',serif;font-size:clamp(4rem,8vw,6.5rem);font-weight:300;letter-spacing:-0.04em;line-height:1;color:var(--ink)}
.pricing__currency{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:400;color:var(--ink-soft);letter-spacing:-0.01em}
.pricing__per{font-family:'JetBrains Mono',monospace;font-size:0.78rem;letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:1.5rem;text-transform:uppercase}
.pricing__description{font-size:1.05rem;color:var(--ink-soft);max-width:42ch;margin-bottom:1.5rem;line-height:1.55}
.pricing__badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.9rem;background:var(--accent);color:var(--ink);border-radius:99px;font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1.5rem}
.pricing__badge svg{width:14px;height:14px}
.pricing__includes{list-style:none;display:grid;gap:0.7rem;margin-bottom:2rem}
.pricing__includes li{display:flex;align-items:flex-start;gap:0.7rem;font-size:0.95rem;color:var(--ink)}
.pricing__includes li svg{flex-shrink:0;color:var(--accent);margin-top:0.18rem}
.pricing__includes li strong{font-weight:600}
.pricing__cta{display:flex;gap:0.6rem;flex-wrap:wrap}

.pricing__side{background:var(--ink);color:var(--paper);border-radius:32px;padding:3rem 2.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column}
.pricing__side::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(232,184,76,0.18),transparent 55%),radial-gradient(circle at 0% 100%,rgba(84,110,122,0.15),transparent 50%);pointer-events:none}
.pricing__side>*{position:relative}
.pricing__side-eyebrow{color:var(--gold);margin-bottom:1rem;display:block}
.pricing__side h3{font-family:'Fraunces',serif;font-size:2rem;font-weight:400;letter-spacing:-0.025em;margin-bottom:0.8rem;line-height:1.05}
.pricing__side h3 em{font-style:italic;color:var(--gold)}
.pricing__side>p{font-size:0.92rem;color:rgba(255,255,255,0.7);line-height:1.55;margin-bottom:1.8rem}
.overage-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:1.3rem;margin-bottom:1.2rem}
.overage-card__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.4rem;gap:1rem;flex-wrap:wrap}
.overage-card__head strong{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500;color:var(--paper)}
.overage-card__head .pill{font-family:'JetBrains Mono',monospace;font-size:0.6rem;background:rgba(232,184,76,0.18);color:var(--gold);padding:0.2rem 0.55rem;border-radius:99px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;flex-shrink:0}
.overage-card p{font-size:0.82rem;color:rgba(255,255,255,0.6);line-height:1.5}
.overage-card__rate{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:300;color:var(--paper);margin-top:0.5rem;letter-spacing:-0.02em}
.overage-card__rate em{font-style:italic;color:var(--gold)}
.overage-card__rate small{font-family:'Inter Tight',sans-serif;font-size:0.78rem;color:rgba(255,255,255,0.55);font-weight:400;letter-spacing:0;margin-left:0.3rem}
.calc{margin-top:auto;padding-top:1.2rem;border-top:1px dashed rgba(255,255,255,0.18)}
.calc__label{font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:rgba(255,255,255,0.5);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.8rem;display:block}
.calc__example{display:flex;justify-content:space-between;align-items:baseline;font-size:0.86rem;padding:0.4rem 0;border-bottom:1px dashed rgba(255,255,255,0.1);color:rgba(255,255,255,0.75);gap:0.8rem}
.calc__example:last-child{border-bottom:none;padding-top:0.6rem}
.calc__example strong{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:500;color:var(--accent-soft);letter-spacing:-0.01em;white-space:nowrap}

/* cta */
.cta-final{background:var(--ink);color:var(--paper);border-radius:32px;padding:5rem 3rem;text-align:center;position:relative;overflow:hidden;margin:4rem 0 6rem}
.cta-final::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center top,rgba(84,110,122,0.18),transparent 60%);pointer-events:none}
.cta-final>*{position:relative}
.cta-final h2{font-size:clamp(2rem,4.5vw,3.4rem);margin-bottom:1.2rem}
.cta-final h2 em{font-style:italic;color:var(--accent-soft)}
.cta-final p{color:rgba(255,255,255,0.7);max-width:48ch;margin:0 auto 2rem;font-size:1.05rem}
.cta-final__buttons{display:flex;justify-content:center;gap:0.8rem;flex-wrap:wrap}
.cta-final .btn{background:var(--accent);color:var(--ink)}
.cta-final .btn:hover{background:var(--paper)}
.cta-final .btn--outline{background:transparent;color:var(--paper);border-color:rgba(255,255,255,0.3)}
.cta-final .btn--outline:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* footer */
footer{padding:4rem 0 2.5rem;border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer__brand p{color:var(--ink-soft);font-size:0.92rem;max-width:36ch;margin-top:1rem;line-height:1.55}
.footer__col h5{font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.2rem;font-weight:500}
.footer__col a{display:block;padding:0.4rem 0;font-size:0.92rem;color:var(--ink);transition:color 0.2s}
.footer__col a:hover{color:var(--accent)}
.footer__bottom{padding-top:2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.84rem;color:var(--ink-soft)}
.footer__bottom .mono{font-size:0.66rem}
.footer__bottom a{color:var(--ink-soft);transition:color 0.2s}
.footer__bottom a:hover{color:var(--accent)}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* responsive */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:3rem}
  .ecosystem{padding:3rem 2rem}
  .ecosystem__grid{grid-template-columns:1fr;gap:3rem}
  .studio{max-width:580px;margin:0 auto}
  .modules{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .howit__inner{grid-template-columns:1fr;gap:1rem}
  .cases{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .section__header{grid-template-columns:1fr;gap:1.2rem}
  .footer__top{grid-template-columns:1fr 1fr}
  .topbar__inner{padding:0.4rem 1.5rem}
}
@media (max-width:680px){
  .container{padding:0 1.2rem}
  .nav__inner{padding:1rem 1.2rem;gap:0.5rem}
  .nav__links{display:none}
  .logo__by{font-size:0.62rem}
  .logo__name{font-size:1.2rem}
  .nav__right .btn span{display:none}
  .nav__right .btn{padding:0.55rem 0.7rem}
  .topbar__inner{padding:0.4rem 1.2rem;gap:0.7rem;font-size:0.72rem;justify-content:center}
  .topbar__link svg{width:12px;height:12px}
  .topbar__link--phone{font-size:0.72rem}
  .hero{padding:3rem 0 4rem}
  .section{padding:4rem 0}
  .features{grid-template-columns:1fr}
  .modules{grid-template-columns:1fr}
  .ecosystem{padding:2.5rem 1.4rem}
  .howit{padding:2.5rem 1.5rem}
  .pricing__main{padding:2.5rem 1.8rem}
  .pricing__side{padding:2.2rem 1.8rem}
  .cta-final{padding:3.5rem 1.8rem}
  .footer__top{grid-template-columns:1fr;gap:2rem}
  .scene{max-width:380px;perspective:none}
  .screen--food,.screen--counter{transform:none !important;animation:none !important}
  .screen--billboard,.screen--gas{transform:none !important;animation:none !important}
  .scene__hub{width:46%;padding:0.6rem 0.7rem}
  .scene__hub-brand{font-size:0.7rem}
  .studio{max-width:100%}
  .studio__body{grid-template-columns:108px 1fr;min-height:340px}
  .studio__sidebar{padding:0.65rem 0.5rem}
  .studio__nav-item span:not(.dot){display:none}
  .studio__nav-item{justify-content:center;padding:0.45rem}
  .studio__main{padding:0.85rem 0.95rem}
  .studio__main-head{gap:0.4rem}
  .studio__title{font-size:0.85rem}
  .studio__screen-name{font-size:0.65rem}
  .studio__landed-card .big{font-size:1.3rem}
}

/* ===== Strat GEO (stilat cu variabilele existente — designul original neatins) ===== */
.crumbs{font-size:0.8rem;color:var(--ink-soft);padding:1.1rem 0}
.crumbs a{color:var(--ink-soft)}.crumbs a:hover{color:var(--accent)}
.answer-wrap{margin:2.5rem auto 0}
.answer{background:var(--paper-warm);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:1.4rem 1.7rem;max-width:900px}
.answer h2{font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:0.6rem;font-weight:500}
.answer p{font-size:1.02rem;line-height:1.6;margin:0}
.geo-body{padding:4rem 0 1rem}
.geo-body h2{font-family:'Fraunces',serif;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:400;letter-spacing:-0.02em;margin:2.4rem 0 0.8rem}
.geo-body p{max-width:72ch;line-height:1.65;margin-bottom:1rem;color:var(--ink-soft)}
.geo-body p strong{color:var(--ink)}
.geo-body ul{max-width:72ch;margin:0 0 1rem 1.2rem;color:var(--ink-soft);line-height:1.65}
.facts{padding:3rem 0}
.facts h2{font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;font-weight:500}
.facts dl{border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:860px}
.facts__row{display:grid;grid-template-columns:240px 1fr;border-top:1px solid var(--line-soft)}
.facts__row:first-child{border-top:none}
.facts__row:nth-child(odd){background:var(--paper-warm)}
.facts dt{font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-soft);padding:0.75rem 1rem}
.facts dd{padding:0.75rem 1rem;font-size:0.94rem}
.faq{padding:3rem 0}
.faq h2{font-family:'Fraunces',serif;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:400;letter-spacing:-0.02em;margin-bottom:1.4rem}
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:0.7rem;background:var(--paper)}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:600;font-size:0.98rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.2rem 1.1rem;color:var(--ink-soft);line-height:1.6;max-width:none}
.related{padding:0 0 3rem}
.related h2{font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;font-weight:500}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.related__grid a{border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;transition:border-color .2s,transform .2s;display:block}
.related__grid a:hover{border-color:var(--accent);transform:translateY(-2px)}
.related__grid b{display:block;font-size:0.96rem;margin-bottom:0.3rem}
.related__grid span{font-size:0.82rem;color:var(--ink-soft);line-height:1.45;display:block}
.page-meta{font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.06em;color:var(--ink-soft);padding:0 0 3rem}
.subhero{padding:4.5rem 0 1rem}
.subhero h1{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-0.035em;line-height:0.98;font-variation-settings:"opsz" 144;font-size:clamp(2.3rem,5vw,4rem);max-width:22ch}
.subhero h1 em{font-style:italic;color:var(--accent)}
.subhero .lede{font-size:1.1rem;color:var(--ink-soft);max-width:60ch;margin-top:1.3rem;line-height:1.6}
.demo-form-wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:2.5rem;padding:0 0 5rem;align-items:start}
.demo-form{background:var(--paper-warm);border:1px solid var(--line);border-radius:18px;padding:2rem}
.demo-form h3{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:400;margin-bottom:1.1rem}
.demo-form label{display:block;font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);margin:0.9rem 0 0.3rem}
.demo-form input,.demo-form select,.demo-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:0.65rem 0.8rem;font-family:'Inter Tight',sans-serif;font-size:0.95rem;background:var(--paper);color:var(--ink)}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-success{display:none;margin-top:0.9rem;color:var(--accent-deep);font-weight:600;font-size:0.92rem}
.form-success.is-shown{display:block}
.contact-card{border:1px solid var(--line);border-radius:18px;padding:2rem}
.contact-card h3{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:400;margin-bottom:0.9rem}
.contact-card p{margin-bottom:0.55rem;font-size:0.95rem;color:var(--ink-soft)}
.contact-card a{color:var(--accent-deep);font-weight:600}
@media (max-width:1080px){.demo-form-wrap{grid-template-columns:1fr}.related__grid{grid-template-columns:1fr}}
@media (max-width:680px){.facts__row{grid-template-columns:1fr}.facts dt{padding-bottom:0}}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:0.5rem 1rem;z-index:200}
.skip:focus{left:0}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}