/* Mottopin site — dark plum with lavender and warm gold, Playfair for display, Manrope for text. */
:root{--bg:#0B070D;--fg:#F6F0F8;--muted:#A99BAF;--soft:#D8CCDF;--accent:#C9A9DC;--gold:#E8CD95;--pin:#D2344F;
  --line:rgba(220,196,234,.12);--card:rgba(255,255,255,.035);
  --display:'Playfair Display',Georgia,serif;--body:'Manrope',-apple-system,Helvetica,Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  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'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.glow{position:absolute;inset:0 0 auto 0;height:900px;pointer-events:none;z-index:0;
  background:radial-gradient(600px 420px at 78% 22%,rgba(150,90,175,.35),transparent 70%),radial-gradient(500px 380px at 10% 0%,rgba(232,205,149,.12),transparent 70%)}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.wm{font-family:var(--display);font-style:italic;font-weight:500;font-size:30px;color:var(--fg);text-decoration:none;letter-spacing:.3px}
.wm .i{position:relative;display:inline-block}
.wm .i::after{content:"";position:absolute;left:50%;top:.13em;width:.27em;height:.27em;margin-left:-.06em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFA9BA,var(--pin) 55%,#8E1A2E);box-shadow:0 2px 5px rgba(0,0,0,.45)}
.navlinks{display:flex;gap:22px;align-items:center;font-size:14px}
.navlinks a{color:var(--muted);text-decoration:none;transition:color .15s}
.navlinks a:hover{color:var(--fg)}
.lang{border:1px solid var(--line);border-radius:99px;padding:6px 14px}
@media (max-width:520px){.navlinks a:not(.lang){display:none}}

.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center;padding:36px 0 80px}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding:70px 0 120px}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:12px;letter-spacing:3px;font-weight:700}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);opacity:.7}
h1{font-family:var(--display);font-weight:700;font-size:clamp(46px,7.4vw,84px);line-height:1;margin:18px 0 22px;letter-spacing:-.5px;text-wrap:balance}
h1 em{font-weight:500;background:linear-gradient(90deg,#E9D5F5,#C9A9DC 60%,#E8CD95);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--soft);font-size:19px;max-width:44ch;margin:0 0 34px}
.badges{display:flex;gap:14px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:14px;height:68px;padding:0 26px 0 22px;border-radius:18px;background:#000;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .15s,border-color .15s}
.badge:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45)}
.badge svg{width:32px;height:32px;flex:none}
.badge span{display:flex;flex-direction:column;line-height:1.05}
.badge small{font-size:11.5px;font-weight:600;opacity:.85}
.badge b{font-size:23px;font-weight:700;letter-spacing:-.3px}
.note{color:var(--muted);font-size:14px;margin-top:16px}
.stats{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.stats div{font-size:13px;color:var(--muted)}
.stats b{display:block;font-family:var(--display);font-size:28px;color:var(--fg);font-weight:600}

/* Phone mock with floating post-its */
.stage{position:relative;justify-self:center;width:min(330px,78vw)}
.phone{position:relative;border-radius:54px;padding:12px;background:linear-gradient(160deg,#2b2030,#0c080e);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px rgba(0,0,0,.6),0 0 120px rgba(170,110,200,.25)}
.phone .screen{border-radius:43px;overflow:hidden;background:#24142B;padding-top:44px}
.phone img{width:100%;display:block}
.phone .island{position:absolute;top:24px;left:50%;width:30%;height:26px;margin-left:-15%;background:#000;border-radius:20px}
.float{position:absolute;z-index:2;padding:14px 16px;border-radius:4px;font-family:var(--display);font-style:italic;font-size:15px;line-height:1.3;color:#3A3122;box-shadow:0 20px 40px rgba(0,0,0,.4);width:170px}
.float::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFA9BA,var(--pin) 55%,#8E1A2E)}
.float.a{background:#FCEFB4;left:-150px;top:16%;transform:rotate(-6deg)}
.float.b{background:#D6F2E4;right:-140px;top:60%;transform:rotate(5deg);color:#20352B}
@media (max-width:900px){.float{display:none}}

section{padding:56px 0;position:relative;z-index:1}
.center{text-align:center}
h2{font-family:var(--display);font-weight:600;font-size:clamp(32px,4.8vw,50px);line-height:1.1;margin:14px 0 14px;text-wrap:balance}
h2 em{font-weight:500;color:var(--accent)}
.sub{color:var(--muted);max-width:58ch;margin:0 auto 40px;font-size:17px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.feature{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;transition:transform .2s,border-color .2s}
.feature:hover{transform:translateY(-3px);border-color:rgba(220,196,234,.28)}
.feature .dot{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:20px;margin-bottom:16px;color:#2B2430;font-weight:700;transform:rotate(-4deg);box-shadow:0 8px 18px rgba(0,0,0,.3)}
.feature h3{margin:0 0 6px;font-size:18px}
.feature p{margin:0;color:var(--muted);font-size:15px}

.quote{padding:70px 0}
.postit{display:inline-block;background:#FCEFB4;color:#3A3122;padding:40px 46px 34px;border-radius:4px;transform:rotate(-1.5deg);box-shadow:0 30px 70px rgba(0,0,0,.5);position:relative;max-width:620px;text-align:left}
.postit::before{content:"";position:absolute;top:-12px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFA9BA,var(--pin) 55%,#8E1A2E);box-shadow:0 5px 10px rgba(0,0,0,.4)}
.postit q{font-family:var(--display);font-style:italic;font-size:clamp(23px,3.4vw,31px);line-height:1.32;display:block;quotes:"“" "”"}
.postit cite{display:block;margin-top:18px;font-style:normal;font-weight:700;color:#7A6A45;font-size:14px;letter-spacing:.3px}

.gallery{display:flex;gap:22px;overflow-x:auto;padding:10px 4px 30px;scroll-snap-type:x mandatory;justify-content:safe center}
.gallery figure{margin:0;flex:none;width:190px;scroll-snap-align:start;text-align:center}
.gallery .phone{border-radius:40px;padding:9px}
.gallery .phone .screen{border-radius:32px;padding-top:32px}
.gallery .phone .island{top:17px;height:19px}
.gallery figcaption{margin-top:16px;color:var(--soft);font-weight:600;font-size:15px}

.pro{position:relative;overflow:hidden;border-radius:30px;padding:46px;background:linear-gradient(135deg,#2A1630 0%,#3D2148 55%,#2A1630 100%);border:1px solid rgba(232,205,149,.25)}
.pro::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(232,205,149,.22),transparent 70%)}
.pro .tag{display:inline-block;color:#1A0F1E;background:var(--gold);font-weight:800;font-size:12px;letter-spacing:2px;padding:5px 12px;border-radius:99px}
.pro h2{margin-top:16px}
.pro .sub{margin:0 0 26px;color:var(--soft)}
.pro ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 30px}
.pro li{display:flex;gap:10px;align-items:flex-start;color:var(--fg)}
.pro li::before{content:"✦";color:var(--gold)}

footer{border-top:1px solid var(--line);margin-top:50px;padding:30px 0 46px;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;position:relative;z-index:1}
footer a{color:var(--muted)}
.doc{max-width:720px;margin:0 auto;padding:20px 0 60px;position:relative;z-index:1}
.doc h1{font-size:clamp(34px,6vw,48px)}
.doc h2{font-size:24px;margin:30px 0 8px}
.doc p,.doc li{color:#DCCFE3}
.doc ul{padding-left:20px}
.doc .meta{color:var(--muted);font-size:14px}
.doc hr{border:none;border-top:1px solid var(--line);margin:48px 0}
.doc .lead{color:var(--soft)}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700}
.faq p{color:var(--soft);margin:10px 0 0}