/* Home page */
.hero-wrap{overflow:hidden}
.hero-wrap:before{content:"";position:absolute;inset:auto -10% -40% 30%;height:120%;background:radial-gradient(ellipse at center,rgba(124,58,237,.5),transparent 60%);pointer-events:none}
.hero-wrap:after{content:"";position:absolute;left:-15%;top:-30%;width:60%;height:80%;background:radial-gradient(ellipse at center,rgba(167,139,250,.12),transparent 65%);pointer-events:none}
.portal-link{display:inline-flex;align-items:center;gap:8px}
.portal-link:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acid)}

.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;align-items:center;padding:56px 0 88px;position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--dline);background:rgba(255,255,255,.04);border-radius:99px;padding:7px 14px;font-size:13px;color:#C9C2D8;margin-bottom:28px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 4px rgba(212,242,90,.15)}
.hero h1{font-size:clamp(44px,6.2vw,80px);max-width:640px}
.hero h1 .it{color:var(--grape);display:block}
.lead{font-size:20px;color:var(--dmute);margin:28px 0 36px;max-width:540px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.fine{font-size:13px;color:var(--dfaint);margin-top:18px}

/* hero phone + reels */
.stage{position:relative;display:flex;justify-content:center}
.reel{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0}
.phone{width:320px;border-radius:46px;background:#07040C;padding:11px;box-shadow:0 50px 90px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.04)}
.screen{position:relative;width:100%;aspect-ratio:9/16;border-radius:36px;overflow:hidden;background:linear-gradient(170deg,#2A1650 0%,#4C1D95 45%,#7C3AED 100%);isolation:isolate}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1E1233}
.reel-fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:#fff;font-size:14px;text-align:center;padding:24px}
.reel-fallback[hidden]{display:none}
.reel-fallback svg{width:96px}
.reel-fallback b{font-size:16px}
.reel-loading{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.reel-loading[hidden]{display:none}
.reel-loading i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--acid);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.reel-top{position:absolute;top:0;left:0;right:0;padding:14px 14px 30px;display:flex;justify-content:flex-end;align-items:flex-start;gap:10px;font-size:12px;color:#fff;z-index:2}
.reel-title{font-weight:600;font-size:14px;line-height:1.3;color:#fff;margin:0 4px 10px;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.reel-tag{display:inline-block;margin:0 4px 8px;flex:none;color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--acid);padding:4px 9px;border-radius:99px}
.reel-bottom{position:absolute;left:0;right:0;bottom:0;padding:70px 14px 14px;background:linear-gradient(transparent,rgba(10,5,18,.78) 55%);z-index:2}
.reel-progress{height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;margin:0 4px 12px}
.reel-progress i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.reel-controls{display:flex;align-items:center;gap:8px}
.reel-count{flex:1;text-align:center;font-size:12px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.rc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s}
.rc:hover{background:rgba(255,255,255,.26)}
.rc svg{width:18px;height:18px}
.rc-play .i-play,.rc-play[aria-pressed="true"] .i-pause{display:none}
.rc-play[aria-pressed="true"] .i-play{display:block}
.rc-sound .i-sound,.rc-sound[aria-pressed="true"] .i-muted{display:none}
.rc-sound[aria-pressed="true"] .i-sound{display:block}
.reel-bigplay{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--acid);color:var(--ink);display:grid;place-items:center;z-index:3;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.reel-bigplay[hidden]{display:none}
.reel-bigplay svg{width:30px;height:30px;margin-left:4px}
.reel-label{max-width:320px;text-align:center;font-size:12.5px;line-height:1.45;color:var(--dfaint)}
.mascot{position:absolute;left:calc(50% - 330px);bottom:150px;width:150px;z-index:3;animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(1deg)}}

.for{border-top:1px solid var(--dline);padding:24px 0;display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center;color:var(--dfaint);font-size:15px;position:relative;z-index:1}
.for b{color:#fff;font-weight:500;margin-right:4px}

/* sections */
section{padding:120px 0 0}
h2{font-size:clamp(36px,4.6vw,56px);max-width:820px}
h2 .it{color:var(--violet)}
.sub{color:var(--mute);font-size:18px;margin:20px 0 56px;max-width:600px}
.sec-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:end;margin-bottom:24px}
.sec-head .sub{margin:0 0 6px}

/* services: eight cards, the first one featured */
.svc-sec{background:linear-gradient(180deg,var(--paper),#F4F0FB 55%,var(--paper));padding-bottom:20px}
.svc{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px;counter-reset:svc}
.svc-card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px 24px 24px;box-shadow:0 22px 44px -32px rgba(18,10,31,.35);transition:transform .25s,box-shadow .25s,border-color .25s}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -34px rgba(18,10,31,.45);border-color:#DCD3EC}
.svc-card h3{font-size:22px;letter-spacing:-.02em;line-height:1.15}
.svc-card p{color:var(--mute);font-size:15px;line-height:1.55}
.svc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.svc-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--lilac);color:var(--violet);flex:none}
.svc-ic svg{width:22px;height:22px}
.svc-note{font-size:13px!important;padding-left:12px;border-left:2px solid var(--grape)}
.svc-more{border:0;padding:0}
.svc-more summary{font-size:14px;font-weight:600;color:var(--violet);cursor:pointer;list-style:none;display:inline-flex;gap:6px}
.svc-more summary:after{content:"+";font-size:16px;line-height:1.1;color:var(--violet)}
.svc-more[open] summary:after{content:"–"}
.svc-more p{margin-top:8px;font-size:14px}
.svc-card.feature{grid-column:span 2;grid-row:span 2;background:var(--night);color:#fff;border-color:var(--night);padding:36px;overflow:hidden;justify-content:flex-start}
.svc-card.feature:after{content:"";position:absolute;right:-110px;bottom:-130px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.6),transparent 65%);pointer-events:none}
.svc-card.feature > *{position:relative;z-index:1}
.svc-card.feature h3{font-size:clamp(34px,3.6vw,48px);margin-top:18px}
.svc-card.feature p{color:var(--dmute);font-size:17px;max-width:460px}
.svc-n{font-family:var(--serif);font-style:italic;font-size:40px;line-height:1;color:var(--acid)}
.svc-list{list-style:none;margin:10px 0 18px;border-top:1px solid var(--dline);max-width:460px}
.svc-list li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--dline);font-size:15px}
.svc-list span{color:var(--dmute)}
.svc-card.feature .btn{align-self:flex-start;margin-top:auto}
.svc-card.ask{background:transparent;border:1.5px dashed #CFC6E0;box-shadow:none;justify-content:center}
.svc-card.ask:hover{transform:none;border-color:var(--grape)}
.svc-card.ask .btn{align-self:flex-start;margin-top:6px}
.svc-foot{font-size:14px;color:var(--mute);margin-top:22px}
.tag{font-size:12px;font-weight:600;color:var(--violet);background:var(--lilac);padding:4px 11px;border-radius:99px;white-space:nowrap}
.tag.acid{background:var(--acid);color:var(--ink)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.step{padding:28px 28px 8px 0}
.step+.step{padding-left:28px;border-left:1px solid var(--line)}
.step .n{font-family:var(--serif);font-style:italic;font-size:44px;color:var(--violet);line-height:1}
.step h3{font-size:21px;margin:22px 0 10px}
.step p{color:var(--mute);font-size:15px}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.price{min-width:0;border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:34px;display:flex;flex-direction:column}
.price .top-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.price h3{font-size:20px}
.price .badge{font-size:12px;font-weight:600;background:var(--acid);color:var(--ink);padding:4px 10px;border-radius:99px}
.price .who{color:var(--mute);font-size:14px;margin-top:6px}
.amt{font-size:56px;font-weight:600;letter-spacing:-.04em;margin:28px 0 0;line-height:1}
.amt small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--mute)}
.price ul{list-style:none;margin:28px 0 32px;flex:1;border-top:1px solid var(--line)}
.price li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);font-size:15px;position:relative}
.price li:before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:2px solid var(--violet);border-bottom:2px solid var(--violet);transform:rotate(-45deg)}
.price.hot{background:var(--night);color:#fff;border-color:var(--night)}
.price.hot .who,.price.hot .amt small{color:var(--dmute)}
.price.hot ul,.price.hot li{border-color:var(--dline)}
.price.hot li:before{border-color:var(--acid)}
.note{font-size:15px;color:var(--mute);margin-top:24px}
.note a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--grape)}

/* portal teaser */
.portal-teaser{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.pt-copy p{color:var(--mute);font-size:18px;margin:18px 0 28px;max-width:440px}
.pt-copy h2{font-size:clamp(32px,3.6vw,46px)}
.pt-actions{list-style:none;display:grid;gap:12px}
.pt-actions li{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px;box-shadow:0 18px 40px -28px rgba(18,10,31,.35)}
.pt-actions b{display:block;font-size:19px;letter-spacing:-.01em}
.pt-actions span{color:var(--mute);font-size:15px}
.pa-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--lilac);color:var(--violet)}
.pa-ic svg{width:24px;height:24px}
.pa-ic.like{background:#FCE7F3;color:#DB2777}
.pa-ic.go{background:var(--acid);color:var(--ink)}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
details{border-top:1px solid var(--line);padding:22px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{font-size:19px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--violet);transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
details p{color:var(--mute);margin-top:10px;max-width:560px}
details a{color:var(--violet);text-decoration:underline}

/* contact */
.contact{margin:120px 0 0;background:var(--night);color:#fff;border-radius:32px;padding:72px;display:grid;grid-template-columns:1fr 1fr;gap:64px;position:relative;overflow:hidden}
.contact:before{content:"";position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.45),transparent 65%)}
.contact > *{position:relative}
.contact h2{font-size:clamp(32px,3.8vw,48px)}
.contact h2 .it{color:var(--grape)}
.contact p{color:var(--dmute);margin-top:18px;font-size:18px;max-width:440px}
.sig{margin-top:36px;display:flex;align-items:center;gap:14px;font-size:15px;color:var(--dmute)}
.sig b{display:block;color:#fff;font-weight:600}
.av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--grape),var(--violet));display:grid;place-items:center;font-weight:600}
form{display:grid;gap:16px}
label{font-size:13px;color:#9E95B0}
input,textarea{width:100%;font:inherit;font-size:16px;padding:14px 16px;border-radius:12px;border:1px solid var(--dline);background:rgba(255,255,255,.04);color:#fff;margin-top:8px}
input:focus,textarea:focus{outline:none;border-color:var(--grape);background:rgba(255,255,255,.07)}
input::placeholder,textarea::placeholder{color:#6F6585}
form .btn{margin-top:4px}
.formnote{font-size:13px;color:#9E95B0}.formnote a{color:#C9C2D8;text-decoration:underline}

@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);padding:32px 0 64px;gap:56px}
  .mascot{left:calc(50% - 300px);width:130px}
  .sec-head{grid-template-columns:1fr;gap:0}
  .sec-head .sub{margin:18px 0 0}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(3){border-left:0;padding-left:0}
  .prices,.faq,.contact,.portal-teaser{grid-template-columns:minmax(0,1fr)}
  .portal-teaser{gap:32px}
  .contact{padding:40px 24px;border-radius:24px;gap:40px}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .svc{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:32px}
  .svc-card.feature{grid-column:auto;grid-row:auto;padding:28px 22px}
  .svc-card.feature .btn{width:100%}
  .svc-card{padding:22px 20px}
}
@media (max-width:560px){
  section{padding-top:88px}
  .hero h1{font-size:40px}
  .lead{font-size:18px}
  .cta .btn{flex:1 1 100%}
  .phone{width:270px;border-radius:42px}
  .screen{border-radius:32px}
  .mascot{width:84px;left:calc(50% - 150px);top:-46px;bottom:auto;transform-origin:bottom}
  .steps{grid-template-columns:1fr}
  .step,.step+.step{padding:24px 0 8px;border-left:0}
  .step+.step{border-top:1px solid var(--line)}
  .price{padding:28px 24px}
  .pt-actions li{padding:18px;gap:14px}
  .contact{margin-top:88px}
  .links .portal-link{display:none}
}