/* ===== RPShorts · styles.css ===== */
:root{
  --font-d:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-b:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-m:'Space Mono',ui-monospace,monospace;
  --cyan:#22c3ff; --blue:#5b6bff; --violet:#b14bff;
  --grad:linear-gradient(100deg,#22c3ff 0%,#5b6bff 48%,#b14bff 100%);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{
  font-family:var(--font-b);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  transition:background .4s ease,color .4s ease;
}
body.dark{
  --bg:#06070c; --bg2:#0b0d16; --surface:rgba(255,255,255,.04);
  --surface2:rgba(255,255,255,.06); --border:rgba(255,255,255,.09);
  --text:#eef1f8; --muted:#9aa1b8; --faint:#666d85;
  background:var(--bg); color:var(--text);
}
body.light{
  --bg:#f4f6fb; --bg2:#ffffff; --surface:rgba(12,15,30,.03);
  --surface2:#ffffff; --border:rgba(12,15,30,.10);
  --text:#0c0e18; --muted:#54607a; --faint:#8b95ad;
  background:var(--bg); color:var(--text);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 24px;}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.grad-bg{background:var(--grad);}
svg.lucide{width:1em; height:1em;}
.ico-wa svg,.ico-tiktok svg{width:1em; height:1em; display:block;}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1!important; transform:none!important; transition:none!important;}}
.tilt{transition:transform .25s ease; transform-style:preserve-3d; height:100%;}

/* typography */
.h1{font-family:var(--font-d); font-weight:700; font-size:clamp(2.3rem,5.4vw,4.2rem); line-height:1.04; letter-spacing:-.02em;}
.h2{font-family:var(--font-d); font-weight:700; font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.1; letter-spacing:-.02em;}
.lead{font-size:clamp(1rem,1.4vw,1.18rem); color:var(--muted); max-width:34rem; margin-top:20px;}
.body{color:var(--muted); margin-top:16px; font-size:1.02rem;}
.sub{color:var(--muted); margin-top:14px; font-size:1.05rem; max-width:40rem;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-m); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); padding:7px 13px; border:1px solid var(--border); border-radius:100px; background:var(--surface);}
.eyebrow svg{color:var(--cyan);}
.eyebrow-light{color:#cfe6ff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-d); font-weight:600; font-size:.94rem; padding:12px 20px; border-radius:13px; cursor:pointer; border:1px solid transparent; transition:transform .2s ease,box-shadow .3s ease,background .3s ease,border-color .2s; white-space:nowrap;}
.btn-lg{padding:15px 26px; font-size:1rem; border-radius:15px;}
.btn-block{width:100%; margin-top:6px;}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 8px 30px rgba(91,107,255,.35);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(91,107,255,.5);}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border);}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--cyan);}
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--border);}
.btn-outline:hover{border-color:var(--cyan); transform:translateY(-2px);}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s,border-color .3s,backdrop-filter .3s; border-bottom:1px solid transparent;}
.nav-solid{background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px;}
.brand{display:flex; align-items:center;}
.brand-logo{height:30px; width:auto;}
.nav-links{display:flex; gap:30px; font-size:.92rem; color:var(--muted); font-weight:500;}
.nav-links a{transition:color .2s;} .nav-links a:hover{color:var(--text);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.seg{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-m); font-size:.72rem; font-weight:700; letter-spacing:.05em; padding:8px 11px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .2s;}
.seg:hover{border-color:var(--cyan);}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .2s,transform .2s;}
.icon-btn:hover{border-color:var(--cyan); transform:translateY(-1px);}
.menu-btn{display:none;}
.mobile-menu{display:flex; flex-direction:column; gap:14px; padding:18px 24px 26px; background:var(--bg2); border-bottom:1px solid var(--border);}
.mobile-menu[hidden]{display:none;}
.mobile-menu a{color:var(--text); font-family:var(--font-d); font-weight:600;}

/* hero */
.hero{position:relative; padding:130px 0 90px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; position:relative; z-index:2;}
.hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-cta.center{justify-content:center;}
.hero-stats{display:grid; grid-template-columns:repeat(4,auto); gap:34px; margin-top:42px;}
.stat{display:flex; flex-direction:column; gap:3px;}
.stat-k{font-family:var(--font-d); font-weight:700; font-size:1.45rem;}
.stat-v{font-size:.8rem; color:var(--muted);}

/* hero visual / phone */
.hero-visual{display:flex; justify-content:center;}
.phone-wrap{position:relative; width:300px; max-width:100%;}
.phone{position:relative; aspect-ratio:9/16; border-radius:30px; padding:18px 16px; background:linear-gradient(160deg,#0e1120,#070912); border:1px solid var(--border); box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden; display:flex; flex-direction:column;}
.phone-glow{position:absolute; inset:-40% -10% auto -10%; height:70%; background:radial-gradient(60% 60% at 50% 0%,rgba(91,107,255,.4),transparent 70%); filter:blur(20px);}

/* phone animated canvas (fills the screen, no real video) */
.phone-canvas{position:relative; z-index:2; flex:1; margin-top:14px; border-radius:16px; overflow:hidden; background:radial-gradient(120% 90% at 50% 10%,rgba(34,195,255,.14),transparent 60%),linear-gradient(160deg,#0b1020,#0c0f22); border:1px solid rgba(255,255,255,.08);}
.pc-corner{position:absolute; width:18px; height:18px; border:2px solid rgba(120,160,255,.6); z-index:4;}
.pc-corner.tl{top:10px; left:10px; border-right:0; border-bottom:0; border-top-left-radius:5px;}
.pc-corner.tr{top:10px; right:10px; border-left:0; border-bottom:0; border-top-right-radius:5px;}
.pc-corner.bl{bottom:10px; left:10px; border-right:0; border-top:0; border-bottom-left-radius:5px;}
.pc-corner.br{bottom:10px; right:10px; border-left:0; border-top:0; border-bottom-right-radius:5px;}
.pc-blob{position:absolute; width:170%; height:75%; left:-35%; top:4%; background:conic-gradient(from 0deg,rgba(34,195,255,.4),rgba(91,107,255,.4),rgba(177,75,255,.4),rgba(34,195,255,.4)); filter:blur(30px); border-radius:50%; animation:pcspin 12s linear infinite;}
.pc-sheen{position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 48%,transparent 62%); transform:translateX(-100%); animation:pcsheen 4.5s ease-in-out infinite;}
.pc-scan{position:absolute; left:0; right:0; height:2px; top:0; background:linear-gradient(90deg,transparent,rgba(150,200,255,1),transparent); box-shadow:0 0 14px rgba(120,170,255,.9); animation:pcscan 3.6s ease-in-out infinite; z-index:3;}
.pc-dot{position:absolute; width:6px; height:6px; border-radius:50%; background:#bfe0ff; box-shadow:0 0 10px rgba(120,180,255,.9); opacity:.8; z-index:3;}
.pc-dot.d1{top:24%; left:24%; animation:pcfloat 5s ease-in-out infinite;}
.pc-dot.d2{top:34%; right:22%; width:4px; height:4px; animation:pcfloat 6.2s ease-in-out infinite .6s;}
.pc-dot.d3{top:58%; left:30%; width:5px; height:5px; animation:pcfloat 5.6s ease-in-out infinite .3s;}
.pc-dot.d4{top:50%; right:30%; width:4px; height:4px; animation:pcfloat 6.8s ease-in-out infinite .9s;}
.pc-play{position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 36px rgba(91,107,255,.6); z-index:4;}
.pc-play i{width:0; height:0; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff; margin-left:3px;}
.pc-ring{position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(140,180,255,.6); animation:pcpulse 2.6s ease-out infinite;}
.pc-ring.r2{animation-delay:1.3s;}
.pc-eq{position:absolute; left:0; right:0; bottom:0; height:36%; display:flex; align-items:flex-end; justify-content:center; gap:4px; padding:0 14px 14px; z-index:3;}
.pc-eq i{width:5px; border-radius:3px; background:linear-gradient(180deg,#22c3ff,#b14bff); opacity:.95; animation:pceq 1.1s ease-in-out infinite; transform-origin:bottom;}
.pc-eq i:nth-child(1){height:24%; animation-delay:0s}.pc-eq i:nth-child(2){height:55%; animation-delay:.1s}
.pc-eq i:nth-child(3){height:38%; animation-delay:.2s}.pc-eq i:nth-child(4){height:70%; animation-delay:.3s}
.pc-eq i:nth-child(5){height:46%; animation-delay:.15s}.pc-eq i:nth-child(6){height:88%; animation-delay:.05s}
.pc-eq i:nth-child(7){height:60%; animation-delay:.25s}.pc-eq i:nth-child(8){height:40%; animation-delay:.35s}
.pc-eq i:nth-child(9){height:75%; animation-delay:.12s}.pc-eq i:nth-child(10){height:50%; animation-delay:.22s}
.pc-eq i:nth-child(11){height:64%; animation-delay:.08s}.pc-eq i:nth-child(12){height:34%; animation-delay:.3s}
.pc-eq i:nth-child(13){height:58%; animation-delay:.18s}.pc-eq i:nth-child(14){height:28%; animation-delay:.27s}
.phone-top{display:flex; align-items:center; justify-content:space-between; color:#cfe6ff; position:relative; z-index:2;}
.rec{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-m); font-size:.62rem; letter-spacing:.12em; color:#cfe6ff;}
.rec i{width:7px; height:7px; border-radius:50%; background:#22c3ff; box-shadow:0 0 10px #22c3ff; animation:pulse 1.6s infinite;}
.phone-caption{margin-top:16px; margin-bottom:18px; position:relative; z-index:2; display:flex; flex-direction:column; gap:9px;}
.cap-line{height:11px; border-radius:6px; background:rgba(255,255,255,.12);}
.cap-line.w1{width:78%;} .cap-line.w2{width:55%;}
.cap-word{align-self:flex-start; font-family:var(--font-d); font-weight:700; font-size:.92rem; color:#fff; padding:5px 11px; border-radius:9px; background:var(--grad); box-shadow:0 6px 18px rgba(91,107,255,.5);}
.phone-graph{position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.1); padding-top:14px;}
.graph-label{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-m); font-size:.6rem; letter-spacing:.08em; color:#9fb4ff; text-transform:uppercase;}
.curve{width:100%; height:64px; margin-top:6px; display:block;}
.curve-line{stroke-dasharray:600; stroke-dashoffset:600; animation:draw 2.4s .4s cubic-bezier(.2,.7,.2,1) forwards;}
.curve-fill{opacity:0; animation:fade 1.2s 1.6s forwards;}
.timeline{display:flex; align-items:center; gap:10px; margin-top:6px; font-family:var(--font-m); font-size:.62rem; color:#9fb4ff;}
.tl-bar{flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.12); position:relative; overflow:hidden;}
.tl-bar i{position:absolute; inset:0; width:78%; border-radius:4px; background:var(--grad); transform-origin:left; animation:fill 2.4s .4s cubic-bezier(.2,.7,.2,1) forwards; transform:scaleX(0);}

/* floating chips */
.chip{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-d); font-weight:600; font-size:.78rem; padding:9px 13px; border-radius:12px; background:color-mix(in srgb,var(--bg2) 86%,transparent); border:1px solid var(--border); box-shadow:0 14px 34px rgba(0,0,0,.3); backdrop-filter:blur(8px); color:var(--text);}
.chip svg{color:var(--cyan);}
.chip-1{top:6%; left:-44px; animation:float 5s ease-in-out infinite;}
.chip-2{top:42%; right:-58px; animation:float 6s ease-in-out infinite .8s;}
.chip-3{bottom:9%; left:-36px; animation:float 5.4s ease-in-out infinite .4s;}

/* orbs + grid bg */
.orb{position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; pointer-events:none; z-index:0;}
.orb-a{width:480px; height:480px; top:-180px; left:-120px; background:radial-gradient(circle,#22c3ff,transparent 65%);}
.orb-b{width:520px; height:520px; bottom:-220px; right:-160px; background:radial-gradient(circle,#b14bff,transparent 65%);}
.orb-c{width:560px; height:560px; top:-200px; right:-180px; background:radial-gradient(circle,#5b6bff,transparent 65%); opacity:.35;}
body.light .orb{opacity:.28;}
.grid-bg{position:absolute; inset:0; z-index:1; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%); mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%); opacity:.5;}

/* sections */
.section{position:relative; padding:96px 0; overflow:hidden;}
.section-head{max-width:42rem; margin:0 auto 56px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.section-head .h2{margin-top:16px;}

/* about */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;}
.about-media{position:relative;}
.about-frame{position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--border); aspect-ratio:4/5; box-shadow:0 30px 70px rgba(0,0,0,.4);}
.about-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(6,7,12,.55)); pointer-events:none;}
.about-frame img{width:100%; height:100%; object-fit:cover;}
.about-badge{position:absolute; left:16px; bottom:16px; z-index:2; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-d); font-weight:600; font-size:.85rem; color:#fff; padding:8px 14px; border-radius:11px; background:rgba(8,10,20,.6); border:1px solid rgba(255,255,255,.15); backdrop-filter:blur(8px);}
.about-badge svg{color:var(--cyan);}
.check-list{margin-top:26px; display:flex; flex-direction:column; gap:12px;}
.check-list li{display:flex; align-items:center; gap:11px; font-weight:500; font-family:var(--font-d); font-size:.98rem;}
.check-list svg{color:var(--cyan); flex-shrink:0;}

/* cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{position:relative; height:100%; padding:28px 26px; border-radius:20px; background:var(--surface); border:1px solid var(--border); transition:border-color .3s,box-shadow .3s,transform .25s; overflow:hidden;}
.card::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 0% 0%,rgba(91,107,255,.14),transparent 55%); opacity:0; transition:opacity .35s;}
.card:hover{border-color:color-mix(in srgb,var(--blue) 50%,var(--border)); box-shadow:0 24px 60px rgba(0,0,0,.32); transform:translateY(-4px);}
.card:hover::before{opacity:1;}
.card-ico{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(91,107,255,.4); position:relative; z-index:1;}
.card-t{font-family:var(--font-d); font-weight:600; font-size:1.12rem; margin-top:18px; position:relative; z-index:1;}
.card-d{color:var(--muted); margin-top:10px; font-size:.96rem; position:relative; z-index:1;}

/* pricing */
.price-grid{display:grid; grid-template-columns:repeat(2,minmax(0,400px)); gap:26px; justify-content:center;}
.price-card{position:relative; height:100%; padding:36px 32px; border-radius:24px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; transition:border-color .3s,box-shadow .3s,transform .25s;}
.price-card:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--border)); transform:translateY(-4px);}
.price-pop{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 12%,var(--bg2)),var(--bg2)); border-color:color-mix(in srgb,var(--blue) 55%,var(--border)); box-shadow:0 30px 80px rgba(91,107,255,.28);}
.pop-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; font-family:var(--font-d); font-weight:600; font-size:.76rem; color:#fff; padding:6px 15px; border-radius:100px; background:var(--grad); box-shadow:0 8px 22px rgba(91,107,255,.5); white-space:nowrap;}
.price-name{font-family:var(--font-d); font-weight:600; font-size:1.2rem; color:var(--muted);}
.price-amount{display:flex; align-items:flex-end; gap:8px; margin-top:14px;}
.price-num{font-family:var(--font-d); font-weight:700; font-size:3.1rem; line-height:1;}
.price-unit{color:var(--faint); font-size:.95rem; padding-bottom:7px;}
.price-desc{color:var(--muted); margin-top:10px; font-size:.95rem;}
.price-feats{margin:24px 0; display:flex; flex-direction:column; gap:13px; flex:1;}
.price-feats li{display:flex; align-items:flex-start; gap:11px; font-size:.96rem;}
.price-feats svg{color:var(--cyan); flex-shrink:0; margin-top:2px;}
.price-note{text-align:center; color:var(--muted); margin-top:34px; font-size:.95rem;}

/* reviews */
.review{height:100%; padding:28px 26px; border-radius:20px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column;}
.stars{display:flex; gap:3px; color:#ffc24b; margin-bottom:14px;}
.stars svg{fill:currentColor;}
.review-text{color:var(--text); font-size:1rem; line-height:1.6; flex:1;}
.review-who{display:flex; align-items:center; gap:12px; margin-top:22px;}
.avatar{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-d); font-weight:700;}
.review-who b{font-family:var(--font-d); font-weight:600; font-size:.95rem; display:block;}
.review-who i{color:var(--muted); font-size:.82rem; font-style:normal;}

/* newsletter */
.news{position:relative; border-radius:30px; padding:64px 40px; overflow:hidden; background:linear-gradient(135deg,#0d1024,#161033); border:1px solid var(--border); text-align:center;}
.news-orb{position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(70px); background:radial-gradient(circle,rgba(91,107,255,.6),transparent 65%); top:-160px; left:50%; transform:translateX(-50%);}
.news-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 70%); mask-image:radial-gradient(circle at 50% 50%,#000,transparent 70%);}
.news-inner{position:relative; z-index:2; max-width:38rem; margin:0 auto; display:flex; flex-direction:column; align-items:center;}
.news-h{color:#fff; margin-top:16px;}
.news-sub{color:#b9c0da; margin-top:14px;}
.news-form{display:flex; gap:10px; margin-top:28px; width:100%; max-width:30rem;}
.news-form input{flex:1; padding:14px 18px; border-radius:13px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-family:var(--font-b); font-size:.96rem; outline:none; transition:border-color .2s;}
.news-form input::placeholder{color:#8b93b0;}
.news-form input:focus{border-color:var(--cyan);}
.news-msg{margin-top:14px; font-size:.9rem; display:inline-flex; align-items:center; gap:7px;}
.news-msg[hidden]{display:none;}
.news-msg.ok{color:#5be0a0;} .news-msg.err{color:#ff7a8a;}

/* final + footer */
.final-inner{text-align:center; max-width:42rem; margin:0 auto; display:flex; flex-direction:column; align-items:center;}
.footer{border-top:1px solid var(--border); padding:56px 0 30px; background:var(--bg2);}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;}
.footer-brand .brand-logo{height:28px;}
.footer-brand p{color:var(--muted); margin-top:14px; font-size:.92rem; max-width:18rem;}
.footer-col h4{font-family:var(--font-d); font-weight:600; font-size:.95rem; margin-bottom:16px;}
.footer-col a{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.92rem; margin-bottom:11px; transition:color .2s;}
.footer-col a:hover{color:var(--text);}
.socials{display:flex; gap:10px;}
.socials a{width:40px; height:40px; border-radius:11px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--text); font-size:1.05rem; margin:0; transition:border-color .2s,transform .2s;}
.socials a:hover{border-color:var(--cyan); transform:translateY(-2px);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:40px; padding-top:24px; border-top:1px solid var(--border); color:var(--faint); font-size:.84rem; gap:12px; flex-wrap:wrap;}

/* footer portfolio entry */
.footer-portfolio .fp-text{color:var(--muted); font-size:.9rem; margin-bottom:22px; max-width:16rem; line-height:1.55;}
.footer-col a.fp-btn{display:inline-flex; color:#fff; margin-bottom:0; margin-top:6px; width:auto; padding:12px 20px;}

/* ===== Portfolio page ===== */
.pf-hero{padding:140px 0 30px; text-align:center;}
.pf-head{position:relative; z-index:2; max-width:46rem; margin:0 auto; display:flex; flex-direction:column; align-items:center;}
.pf-head .h1{margin-top:16px;}
.pf-head .lead{margin-left:auto; margin-right:auto;}
.pf-back{position:absolute; top:-2px; left:24px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-d); font-weight:600; font-size:.9rem; color:var(--muted); transition:color .2s;}
.pf-back:hover{color:var(--text);}
.pf-section{padding-top:36px;}
.pf-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px;}
.pf-card{position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden; border:1px solid var(--border); background:#0a0c16; cursor:pointer; transition:transform .3s ease,box-shadow .3s ease,border-color .3s; outline:none;}
.pf-card:hover,.pf-card:focus-visible{transform:translateY(-6px); border-color:color-mix(in srgb,var(--blue) 55%,var(--border)); box-shadow:0 28px 60px rgba(0,0,0,.45);}
.pf-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#0a0c16;}
.pf-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,rgba(6,7,12,.15),transparent 35%,rgba(6,7,12,.75)); transition:background .3s;}
.pf-card:hover .pf-overlay{background:linear-gradient(180deg,rgba(6,7,12,.05),transparent 45%,rgba(6,7,12,.8));}
.pf-play-btn{width:54px; height:54px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(91,107,255,.5); transition:transform .3s,opacity .3s;}
.pf-card:hover .pf-play-btn{transform:scale(.9); opacity:.92;}
.pf-play-btn i{width:0; height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; margin-left:3px;}
.pf-card-title{position:absolute; left:14px; right:14px; bottom:14px; z-index:2; font-family:var(--font-d); font-weight:600; font-size:.95rem; color:#fff; line-height:1.3; text-shadow:0 2px 10px rgba(0,0,0,.6);}
.pf-card.is-touch .pf-overlay{background:linear-gradient(180deg,transparent 45%,rgba(6,7,12,.75));}
.pf-card.is-touch .pf-play-btn{width:40px; height:40px; opacity:.85; align-self:flex-start; position:absolute; top:12px; right:12px; box-shadow:0 6px 18px rgba(91,107,255,.45);}
.pf-card.is-touch .pf-play-btn i{border-width:7px 0 7px 12px;}

.pf-empty{max-width:30rem; margin:10px auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; padding:50px 24px; border:1px dashed var(--border); border-radius:24px; background:var(--surface);}
.pf-empty[hidden]{display:none;}
.pf-empty-ico{width:58px; height:58px; border-radius:16px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 10px 28px rgba(91,107,255,.45);}
.pf-empty h3{font-family:var(--font-d); font-weight:700; font-size:1.4rem; margin-top:20px;}
.pf-empty p{color:var(--muted); margin-top:10px; margin-bottom:22px;}

/* lightbox */
.pf-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;}
.pf-modal[hidden]{display:none;}
.pf-modal-bg{position:absolute; inset:0; background:rgba(4,5,10,.82); backdrop-filter:blur(8px);}
.pf-modal-inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; max-width:min(440px,92vw); width:100%;}
.pf-modal-video{width:100%; max-height:82vh; aspect-ratio:9/16; object-fit:contain; border-radius:18px; background:#000; border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 100px rgba(0,0,0,.7);}
.pf-modal-title{color:#fff; font-family:var(--font-d); font-weight:600; margin-top:16px; text-align:center; font-size:1rem;}
.pf-close{position:absolute; top:-46px; right:0; width:40px; height:40px; border-radius:11px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s,transform .2s;}
.pf-close:hover{background:rgba(255,255,255,.16); transform:scale(1.05);}

/* keyframes */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes fill{to{transform:scaleX(1)}}
@keyframes pcspin{to{transform:rotate(360deg)}}
@keyframes pcscan{0%{top:6%}50%{top:62%}100%{top:6%}}
@keyframes pcpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
@keyframes pceq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes pcsheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes pcfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){
  .chip,.rec i{animation:none!important;}
  .curve-line{stroke-dashoffset:0; animation:none;}
  .curve-fill{opacity:1; animation:none;}
  .tl-bar i{transform:scaleX(.78); animation:none;}
  .pc-blob,.pc-scan,.pc-ring,.pc-eq i,.pc-sheen,.pc-dot{animation:none!important;}
  .pc-scan{top:34%;} .pc-sheen{display:none;}
}

/* responsive */
@media (max-width:900px){
  .nav-links{display:none;} .nav-cta{display:none;} .menu-btn{display:inline-flex;}
  .hero{padding:112px 0 70px;}
  .hero-grid{grid-template-columns:1fr; gap:48px;}
  .hero-visual{order:0; margin-top:8px;}
  .hero-stats{grid-template-columns:repeat(2,1fr); gap:24px;}
  .about-grid{grid-template-columns:1fr; gap:36px;}
  .about-frame{max-width:380px; margin:0 auto;}
  .cards{grid-template-columns:1fr 1fr;}
  .price-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px;}
}
@media (max-width:600px){
  .container{padding:0 18px;}
  .cards{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
  .footer-portfolio{grid-column:1 / -1;}
  .news{padding:48px 22px;}
  .news-form{flex-direction:column;}
  .chip-1{left:-10px;} .chip-2{right:-12px;} .chip-3{left:-8px;}
  .footer-bottom{justify-content:center; text-align:center;}
  .pf-hero{padding-top:118px;}
  .pf-back{left:18px;}
  .pf-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .pf-card-title{font-size:.82rem; left:11px; right:11px; bottom:11px;}
}