/* ───────────────────────────────────────────────────────────
   me.synergie.agency — CLONE variant (A/B test)
   1:1 layout copy of competitor reference, but European bg
   instead of UK Big Ben.
   ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body.clone-body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#0B1B3D;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── Background: European cityscape silhouette ── */
.cl-bg{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.cl-bg-img{
  position:absolute;inset:0;
  background:
    /* Top haze */
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(70,110,180,.35) 0%, transparent 60%),
    /* European cityscape silhouette: Eiffel + Brandenburg + EU arch (SVG inline) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1800' preserveAspectRatio='xMidYMid slice'>\
<defs>\
<linearGradient id='sky' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0%' stop-color='%23142b5c'/>\
<stop offset='40%' stop-color='%230b1b3d'/>\
<stop offset='100%' stop-color='%23050d22'/>\
</linearGradient>\
<radialGradient id='glow' cx='50%' cy='30%' r='60%'>\
<stop offset='0%' stop-color='%234d7dd1' stop-opacity='0.45'/>\
<stop offset='100%' stop-color='%23050d22' stop-opacity='0'/>\
</radialGradient>\
</defs>\
<rect width='1200' height='1800' fill='url(%23sky)'/>\
<rect width='1200' height='1800' fill='url(%23glow)'/>\
<g opacity='0.55' fill='%23071437'>\
<rect x='0' y='1100' width='1200' height='700'/>\
<polygon points='200,1100 220,950 240,1100'/>\
<rect x='150' y='1000' width='50' height='100'/>\
<polygon points='320,1100 340,1100 350,800 360,1100'/>\
<rect x='260' y='1100' width='100' height='200'/>\
<rect x='400' y='950' width='110' height='150'/>\
<polygon points='560,1100 600,500 640,1100'/>\
<rect x='590' y='700' width='20' height='400'/>\
<polygon points='700,1100 720,820 740,1100'/>\
<rect x='720' y='850' width='180' height='250'/>\
<polygon points='810,850 815,720 840,720 845,850'/>\
<rect x='815' y='720' width='25' height='130'/>\
<rect x='950' y='1000' width='130' height='100'/>\
<polygon points='1080,1100 1100,940 1120,1100'/>\
<rect x='1050' y='1050' width='120' height='50'/>\
</g>\
<g opacity='0.18' fill='%23ffcc00'>\
<circle cx='600' cy='320' r='4'/>\
<circle cx='720' cy='350' r='4'/>\
<circle cx='790' cy='420' r='4'/>\
<circle cx='790' cy='540' r='4'/>\
<circle cx='720' cy='620' r='4'/>\
<circle cx='600' cy='660' r='4'/>\
<circle cx='480' cy='620' r='4'/>\
<circle cx='410' cy='540' r='4'/>\
<circle cx='410' cy='420' r='4'/>\
<circle cx='480' cy='350' r='4'/>\
<circle cx='350' cy='480' r='4'/>\
<circle cx='850' cy='480' r='4'/>\
</g>\
</svg>");
  background-size:cover;
  background-position:center top;
  filter:blur(6px) brightness(.85);
  transform:scale(1.05);
}
.cl-bg-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(11,27,61,.30) 0%, rgba(11,27,61,.55) 60%, rgba(5,13,34,.85) 100%);
}

.phone.clone-phone{
  position:relative;z-index:1;
  max-width:520px;margin:0 auto;
  min-height:100vh;
  display:flex;flex-direction:column;
  padding:18px 18px 28px;
}

/* ── Top: combined logo + EU flag ── */
.cl-top{
  padding:6px 0 12px;
  user-select:none;
}
.cl-logo-wrap{
  display:flex;align-items:center;gap:14px;
}
.cl-logo-circle{
  width:74px;height:74px;border-radius:50%;
  background:#fff;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  align-items:center;justify-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  overflow:hidden;flex-shrink:0;
  padding:6px;
  gap:1px;
}
.cl-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cl-icon-tg{color:#229ED9}
.cl-icon-tg svg{width:24px;height:24px}
.cl-icon-wa{color:#25D366}
.cl-icon-wa svg{width:22px;height:22px}
.cl-icon-flag{grid-column:1/3;grid-row:2;}
.cl-icon-flag svg{width:38px;height:auto;border-radius:2px}

.cl-titles{flex:1;min-width:0}
.cl-h1{
  font-family:'Inter',sans-serif;
  font-size:30px;font-weight:800;
  letter-spacing:-.02em;line-height:1.05;
  margin:0 0 6px;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.cl-sub{
  margin:0;
  font-size:14px;font-weight:500;
  color:rgba(255,255,255,.85);
  line-height:1.35;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* ── Two big buttons stacked ── */
.cl-cta{margin:18px 0 22px;display:flex;flex-direction:column;gap:12px}
.cl-btn{
  display:flex;align-items:center;gap:14px;
  width:100%;height:60px;
  padding:0 22px;
  font-size:18px;font-weight:700;font-family:inherit;
  border-radius:14px;color:#fff;
  position:relative;
  transition:transform .15s,filter .15s;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.cl-btn:active{transform:scale(.98);filter:brightness(.95)}
.cl-btn-ico{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cl-btn-ico svg{width:20px;height:20px}
.cl-btn-wa{
  background:linear-gradient(180deg,#34D85B 0%,#22BB48 100%);
}
.cl-btn-tg{
  background:linear-gradient(180deg,#5EBEEC 0%,#3FA6D8 100%);
}

/* ── Pitch text block ── */
.cl-pitch{
  text-align:center;
  margin:6px 0 18px;
  padding:0 4px;
}
.cl-pitch p{
  margin:0 0 4px;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.cl-pitch p:last-child{margin-top:6px;font-weight:800}

/* ── Photo carousel ── */
.cl-carousel{
  position:relative;
  margin:6px 0 22px;
  border-radius:18px;overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  background:#0C1A35;
}
.cl-track{
  display:flex;
  transition:transform .55s cubic-bezier(.4,.0,.2,1);
  width:100%;
}
.cl-slide{
  flex:0 0 100%;margin:0;
  position:relative;
  aspect-ratio:1/1.15;
  background:#0C1A35
    radial-gradient(circle at 50% 30%, rgba(70,110,180,.18), transparent 65%);
}
.cl-slide img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
}
.cl-dots{
  position:absolute;bottom:10px;left:0;right:0;
  display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none;
}
.cl-dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.45);
  transition:width .3s ease,background .3s ease;
}
.cl-dots span.active{width:22px;background:#fff;border-radius:4px}

/* ── Red urgency line ── */
.cl-urgency{
  text-align:center;
  margin:6px 0 0;
  font-size:22px;font-weight:800;
  color:#FF3B30;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  letter-spacing:.01em;
  line-height:1.2;
}

/* ── Edit-mode parity ── */
body.edit-mode [data-c]{
  outline:1.5px dashed rgba(94,190,236,.85);outline-offset:3px;
  border-radius:4px;cursor:text;transition:outline-color .15s,background .15s;
  min-width:30px;display:inline-block;
}
body.edit-mode [data-c]:hover{outline-color:#FFC93C;background:rgba(255,201,60,.10)}
body.edit-mode [data-c]:focus{outline:2px solid #FFC93C;background:rgba(255,201,60,.18)}
body.edit-mode [data-c].dirty{outline-color:#34D85B;background:rgba(52,216,91,.18)}
body.edit-mode [data-c].dirty::after{content:"●";color:#34D85B;margin-left:4px;font-size:12px}
body.edit-mode .cl-btn,body.edit-mode .cl-logo-circle{pointer-events:none}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .cl-track{transition:none}
}

/* ── Desktop frame: phone-width centered ── */
@media (min-width:760px){
  body.clone-body{padding:24px 0}
  .phone.clone-phone{
    border-radius:32px;
    box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 8px #1F2937,0 0 0 9px #374151;
    overflow:hidden;
    margin:24px auto;
    background:rgba(11,27,61,.30);
    backdrop-filter:blur(2px);
  }
}