/* tulipix.pro/manager */
.site-manager{--acc:#7C4DFF;--acc-2:#2DD4A8;--acc-3:#EC4899}
.site-manager .btn-solid{background:#6F42F0}

/* ---------- hero: one big pastel panel, the splash screen standing on its edge ---------- */
.hero-wrap{padding:6px var(--gutter) 0}
.hero{position:relative;max-width:var(--wrap);margin:0 auto;border-radius:clamp(28px,4vw,48px);background:
  radial-gradient(75% 70% at 88% 25%,rgba(196,170,255,.75),transparent 62%),
  radial-gradient(55% 60% at 8% 100%,rgba(120,226,200,.4),transparent 60%),
  radial-gradient(50% 50% at 50% 0%,rgba(255,196,225,.55),transparent 70%),
  linear-gradient(160deg,#F1EAFE,#E4F3F3);
  color:var(--text);padding:clamp(34px,6vw,84px) clamp(24px,5vw,72px) 0;overflow:hidden;isolation:isolate;border:1px solid rgba(111,66,240,.12)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:radial-gradient(rgba(91,53,214,.14) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(8px,4vw,56px);align-items:end}
.hero-copy{padding-bottom:clamp(40px,7vw,96px);align-self:center}
.hero h1{max-width:9ch}
.hero .lede{color:var(--mute);margin-top:22px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .btn-line{color:var(--text);border-color:rgba(28,22,49,.5)}
.free{margin:16px 0 0;font-size:.9rem;color:var(--mute)}
.stage{position:relative;justify-self:center;width:min(100%,520px);aspect-ratio:1/1.32;align-self:end}
.stage .orbit{position:absolute;left:50%;top:56%;border-radius:50%;border:1px solid rgba(111,66,240,.26);transform:translate(-50%,-50%);pointer-events:none}
.stage .o1{width:58%;aspect-ratio:1;border-color:rgba(111,66,240,.4)}
.stage .o2{width:88%;aspect-ratio:1}
.stage .o3{width:122%;aspect-ratio:1;border-color:rgba(111,66,240,.14)}
.stage .phone{position:absolute;left:50%;bottom:0;width:min(60%,320px);transform:translate(-50%,0)}

/* phone frame (CSS only) */
.phone{position:relative;aspect-ratio:560/1242;border-radius:44px;padding:9px;background:linear-gradient(160deg,#41366f,#0f0a20 60%);box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1.5px rgba(255,255,255,.14) inset}
.hero .phone{border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0;box-shadow:0 30px 90px -20px rgba(91,53,214,.5),0 0 0 1.5px rgba(255,255,255,.16) inset}
.hero .phone .screen{border-bottom-left-radius:0;border-bottom-right-radius:0}
.phone .screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#0c0818}
.phone .screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- sections on paper ---------- */
.sec{padding-block:clamp(56px,9vw,112px)}
.sec-head{max-width:760px;margin-bottom:clamp(28px,5vw,56px)}
.sec-head p{margin-top:16px;color:var(--mute);font-size:1.1rem}
.band{background:#fff;border-block:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.split.flip .shots{order:-1}
.split .lede{margin-top:16px}
.shots{display:flex;gap:clamp(12px,3vw,28px);justify-content:center;align-items:flex-start}
.shots .phone{width:min(46%,260px);padding:8px;border-radius:38px}
.shots .phone .screen{border-radius:31px}
.shots .phone:nth-child(2){margin-top:56px}
.shots.one .phone{width:min(70%,290px)}
.facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.facts li{padding-left:22px;position:relative;max-width:56ch}
.facts li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-2))}
.facts b{font-weight:600}
.small-note{margin-top:14px;color:var(--mute);font-size:.9rem}

/* ---------- widgets panel ---------- */
.wpanel{position:relative;border-radius:clamp(28px,4vw,48px);overflow:hidden;color:var(--text);background:
  radial-gradient(70% 90% at 100% 0%,rgba(255,176,214,.6),transparent 60%),
  radial-gradient(60% 80% at 0% 100%,rgba(196,170,255,.6),transparent 62%),
  linear-gradient(150deg,#F3ECFE,#EAF2FB);border:1px solid rgba(111,66,240,.12);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(28px,5vw,72px)}
.wpanel h2{font-size:clamp(1.9rem,4vw,3rem)}
.wpanel .lede{color:var(--mute);margin-top:16px}
.wp-look{display:grid;gap:18px;margin-top:26px}
.wp-look dt{font:650 .95rem var(--display);margin-bottom:8px}
.wp-look dd{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.wp-look span{padding:.45em 1em;border:1px solid rgba(28,22,49,.22);border-radius:999px;font-size:.88rem;background:rgba(255,255,255,.7)}
.wp-stage{position:relative;display:grid;place-items:center;padding:clamp(12px,3vw,34px)}
.wp-stage::before{content:"";position:absolute;inset:6% 2%;border-radius:36px;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.35));border:1px solid rgba(111,66,240,.16);transform:rotate(-3deg)}
.wp-stage img{position:relative;height:auto;width:100%;max-width:560px;border-radius:28px;box-shadow:0 36px 60px -28px rgba(60,40,130,.55);transform:rotate(1.5deg)}
.wp-notes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin-top:clamp(4px,2vw,16px);padding-top:clamp(20px,3vw,32px);border-top:1px solid rgba(28,22,49,.14)}
.wp-notes h3{font-size:1.1rem;margin-bottom:6px}
.wp-notes p{margin:0;color:var(--mute);font-size:.94rem}

/* ---------- ledger: the rest ---------- */
.ledger{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.ledger li{display:grid;grid-template-columns:minmax(150px,.32fr) 1fr;gap:8px 32px;padding:20px 0;border-bottom:1px solid var(--line)}
.ledger h3{font-size:1.2rem}
.ledger p{margin:0;color:var(--mute);max-width:64ch}

/* ---------- promise ---------- */
.promise{background:var(--tint);border-block:1px solid var(--line);padding-block:clamp(64px,10vw,128px)}
.promise h2{max-width:16ch}
.promise .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,56px);margin-top:clamp(32px,6vw,64px)}
.promise h3{font-size:1.25rem;margin-bottom:8px}
.promise .cols p{color:var(--mute);margin:0}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font:650 1.15rem/1.3 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-52%);font:500 1.6rem var(--body);color:var(--acc-ink);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-52%) rotate(45deg)}
.faq details p{color:var(--mute);padding:0 40px 18px 0}

/* ---------- closing call ---------- */
.cta-wrap{padding:0 var(--gutter) clamp(40px,6vw,72px)}
.cta-panel{position:relative;overflow:hidden;isolation:isolate;max-width:var(--wrap);margin:0 auto;border-radius:clamp(28px,4vw,48px);padding:clamp(32px,6vw,80px);color:#fff;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,56px);align-items:center;
  background:radial-gradient(70% 90% at 90% 20%,rgba(255,255,255,.28),transparent 60%),linear-gradient(135deg,#6B3DF0 0%,#4F5BEA 45%,#16B79A 100%)}
.cta-panel h2{max-width:14ch}
.cta-panel .lede{color:rgba(255,255,255,.86);margin-top:16px}
.cta-panel .lede a{color:#fff;text-decoration-thickness:2px}
.cta-panel .btn-line{color:#fff;border-color:rgba(255,255,255,.7)}
.cta-panel .btn-solid{background:#fff;color:#3a1fa8}
.cta-panel .btn[aria-disabled="true"]{background:rgba(255,255,255,.22);color:#fff;opacity:1;border-color:transparent}
.cta-panel .apk-note{margin:22px 0 0;max-width:52ch;font-size:.88rem;color:rgba(255,255,255,.78)}
.cta-logo{position:relative;justify-self:center;width:min(100%,300px);aspect-ratio:1;display:grid;place-items:center;padding:clamp(28px,4vw,44px);border-radius:clamp(44px,6vw,76px);background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.48);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 36px 60px -30px rgba(20,10,70,.6),inset 0 1px 0 rgba(255,255,255,.6)}
.cta-logo::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,0) 72%)}
.cta-logo img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(20,10,70,.4))}

@media (max-width:900px){
  .hero-grid,.split,.wpanel{grid-template-columns:1fr}
  .hero{padding-top:34px}
  .hero-copy{padding-bottom:12px}
  .stage{width:min(100%,400px);margin-top:12px;aspect-ratio:1/1.36}
  .stage .phone{width:62%}
  .split.flip .shots{order:0}
  .promise .cols,.wp-notes{grid-template-columns:1fr}
  .cta-panel{grid-template-columns:1fr}
  .cta-panel{padding-top:132px}
  .cta-logo{position:absolute;top:24px;right:24px;width:92px;height:92px;padding:12px;border-radius:28px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.4);box-shadow:0 14px 30px -14px rgba(20,10,70,.5)}
  .cta-logo img{width:100%;height:100%;object-fit:contain;filter:none}
  .cta-logo::before{display:none}
  .ledger li{grid-template-columns:1fr}
}
@media (max-width:520px){
  .shots{gap:10px}
  .shots .phone:nth-child(2){margin-top:32px}
  .cta .btn{flex:1 1 auto;justify-content:center}
}
