/* Ρομπότ ως Υπηρεσία (RaaS) — page-service-rental.php */

@property --raas-ang{syntax:'<angle>'; inherits:false; initial-value:0deg;}

/* Οι λέξεις .oa-w μένουν λευκές. */
.raas-sec .big span:not(.oa-w), .raas-h1 span, .raas-cta-box h2 span{color:var(--accent);}
.raas-head{max-width:780px;}
.raas-head .big{margin-bottom:16px; line-height:1.12; text-wrap:balance;}
.raas-sub{color:var(--muted); font-size:17px; line-height:1.65; margin:0; max-width:62ch;}
.raas-band{background:var(--bg-2); border-block:1px solid rgba(95,125,135,.4);}

.raas-ck{position:relative; flex:none; width:18px; height:18px; border-radius:50%; background:var(--accent);}
.raas-ck::after{content:""; position:absolute; left:6.2px; top:3.4px; width:4.5px; height:8.5px; border:solid #08191e; border-width:0 2px 2px 0; transform:rotate(45deg);}
.raas-ticks{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:11px;}
.raas-ticks li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.45; color:var(--ink);}
.raas-ticks .raas-ck{margin-top:1px;}
.raas-ico{flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--accent); background:rgba(95,208,198,.08); border:1px solid rgba(95,208,198,.35); transition:transform .5s var(--ease), background .4s var(--ease);}
.raas-ico svg{width:24px; height:24px;}
.raas-ico.is-solid{color:#08191e; background:var(--accent); border-color:var(--accent);}

/* ---------- Κεφαλίδα ---------- */
.raas-hero{position:relative; overflow:clip; padding:clamp(36px,6vh,88px) 0 clamp(56px,8vh,104px);}
.raas-hero::before{content:""; position:absolute; top:-30%; right:-12%; width:70%; height:120%; background:radial-gradient(closest-side, rgba(95,208,198,.17), transparent); pointer-events:none;}
.raas-hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px,4.5vw,72px); align-items:center;}
.raas-kicker{display:flex; align-items:center; gap:10px; margin:0 0 16px; color:var(--accent); font:700 12.5px/1 var(--font-display); letter-spacing:.16em; text-transform:uppercase;}
.raas-pill{background:var(--accent); color:#08191e; padding:5px 9px; border-radius:6px; letter-spacing:.08em;}
.raas-h1{font:800 clamp(34px,4.2vw,60px)/1.06 var(--font-display); letter-spacing:-.025em; color:#fff; margin:0 0 22px; text-wrap:balance;}
.raas-h1 span{display:block;}
.raas-lead{font-size:clamp(16px,1.3vw,18.5px); line-height:1.65; color:var(--muted); max-width:52ch; margin:0 0 30px;}
.raas-btns{display:flex; flex-wrap:wrap; gap:12px;}
.raas-facts{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:12px 24px;}
.raas-facts li{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--ink);}

.raas-visual{position:relative;}
.raas-photo{position:relative; background:#fff; border-radius:24px; border:1px solid var(--line); aspect-ratio:16/9; overflow:hidden; box-shadow:0 40px 80px -34px rgba(0,0,0,.7);}
.raas-photo img, .raas-photo video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:5% 4% 1%; display:block; transition:transform 1.2s var(--ease);}
.raas-photo:hover img{transform:scale(1.035);}

.raas-ticket-wrap{position:relative; z-index:2; width:calc(100% - 44px); margin:-30px auto 0; filter:drop-shadow(0 22px 30px rgba(0,0,0,.5));}
.raas-ticket{--stub:136px; display:grid; grid-template-columns:minmax(0,1fr) var(--stub); background:#0f1a1d; border:1px solid var(--line); border-radius:16px;
  -webkit-mask:radial-gradient(circle 10px at calc(100% - var(--stub)) 0, transparent 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, transparent 96%, #000) bottom / 100% 51% no-repeat;
  mask:radial-gradient(circle 10px at calc(100% - var(--stub)) 0, transparent 96%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, transparent 96%, #000) bottom / 100% 51% no-repeat;}
.raas-tk-main{min-width:0; padding:16px 18px 17px 20px;}
.raas-tk-title{display:block; font:800 12.5px/1.2 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:12px;}
.raas-tk-list{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.raas-tk-list li{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--ink);}
.raas-visual.in .raas-tk-list .raas-ck{animation:raasPop .5s var(--ease) backwards;}
.raas-visual.in .raas-tk-list li:nth-child(1) .raas-ck{animation-delay:.5s;}
.raas-visual.in .raas-tk-list li:nth-child(2) .raas-ck{animation-delay:.62s;}
.raas-visual.in .raas-tk-list li:nth-child(3) .raas-ck{animation-delay:.74s;}
.raas-visual.in .raas-tk-list li:nth-child(4) .raas-ck{animation-delay:.86s;}
.raas-visual.in .raas-tk-list li:nth-child(5) .raas-ck{animation-delay:.98s;}
.raas-visual.in .raas-tk-list li:nth-child(n+6) .raas-ck{animation-delay:1.1s;}
.raas-tk-stub{min-width:0; border-left:1.5px dashed var(--line); padding:16px 14px 16px 16px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px;}
.raas-tk-per{font:700 11px/1 var(--font-display); color:var(--accent); letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--accent-dim); padding:4px 7px; border-radius:5px;}
.raas-tk-price{font:700 11px/1.35 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.raas-tk-bars{flex:none; width:62px; height:22px; opacity:.55; background:repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 4px, var(--muted) 4px 5px, transparent 5px 8px, var(--muted) 8px 11px, transparent 11px 13px);}

/* ---------- Αγορά ή συνδρομή ---------- */
.raas-wins{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:38px;}
.raas-win{display:flex; gap:16px; align-items:flex-start; padding:22px 24px; border-radius:18px; background:rgba(95,208,198,.08); border:1px solid rgba(95,208,198,.35);}
.raas-win h3{font:800 20px/1.25 var(--font-display); color:#fff; margin:2px 0 6px;}
.raas-win p{margin:0; color:var(--muted); font-size:15px; line-height:1.6;}
.raas-gain-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px;}
.raas-gain{display:flex; flex-direction:column; gap:14px; padding:26px 26px 24px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(59,82,89,.42), rgba(27,40,44,.65));}
.raas-gain.is-raas{border-color:rgba(95,208,198,.45); background:radial-gradient(120% 90% at 100% 0%, rgba(95,208,198,.16), transparent 60%), linear-gradient(180deg, rgba(59,82,89,.42), rgba(27,40,44,.65));}
.raas-gain-k{font:800 12.5px/1 var(--font-display); letter-spacing:.16em; text-transform:uppercase; color:var(--accent);}
.raas-gain h3{font:800 23px/1.2 var(--font-display); color:#fff; margin:0;}
.raas-gain-link{margin-top:auto; padding-top:16px; border-top:1px dashed var(--line); color:var(--accent); font:800 13px/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase; text-decoration:none;}
.raas-gain-link:hover{color:#fff;}

/* ---------- Τι περιλαμβάνει ---------- */
.raas-inc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:42px; background:rgba(95,125,135,.5); border:1px solid rgba(95,125,135,.5); border-radius:22px; overflow:hidden;}
.raas-inc-card{background:var(--bg-2); padding:30px 28px; display:flex; flex-direction:column; gap:10px; transition:background .4s var(--ease);}
.raas-inc-card:hover{background:#22343a;}
.raas-inc-card:hover .raas-ico{transform:rotate(-8deg) scale(1.08); background:rgba(95,208,198,.18);}
.raas-inc-card h3{font:800 18.5px/1.3 var(--font-display); color:#fff; margin:8px 0 0;}
.raas-inc-card p{margin:0; color:var(--muted); font-size:15px; line-height:1.6;}

/* ---------- Πώς λειτουργεί ---------- */
.raas-steps-wrap{position:relative; margin-top:48px;}
.raas-trace{position:absolute; left:9px; right:0; top:8px; height:2px; background:linear-gradient(90deg, var(--accent-dim), var(--line)); overflow:hidden; border-radius:2px;}
.raas-trace i{position:absolute; top:0; bottom:0; left:0; width:18%; background:linear-gradient(90deg, transparent, var(--cyan) 65%, #fff, transparent); transform:translateX(-100%);}
.raas-steps-wrap.is-live .raas-trace i{animation:raasChargeX 5.5s linear infinite;}
.raas-steps{list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:26px; position:relative;}
.raas-step{position:relative; padding-top:40px;}
.raas-via{position:absolute; top:0; left:0; width:18px; height:18px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-shadow:0 0 0 4px var(--bg);}
.raas-steps-wrap.is-live .raas-via{animation:raasVia 5.5s linear infinite; animation-delay:calc(var(--i, 0) * .95s + .24s);}
.raas-n{display:block; font:800 13px/1 var(--font-display); color:var(--accent); letter-spacing:.1em; margin-bottom:10px;}
.raas-step h3{font:800 19px/1.25 var(--font-display); color:#fff; margin:0 0 8px;}
.raas-step p{margin:0; color:var(--muted); font-size:15px; line-height:1.6;}

/* ---------- Πακέτα ---------- */
.raas-plan-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:44px; padding-top:14px; align-items:stretch;}
.raas-plan{position:relative; display:flex; flex-direction:column; gap:14px; padding:28px 26px 26px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(59,82,89,.42), rgba(27,40,44,.65));}
.raas-plan h3{font:800 25px/1.1 var(--font-display); color:#fff; margin:0;}
.raas-term{display:inline-flex; align-self:flex-start; align-items:center; gap:8px; font:700 11.5px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--accent);}
.raas-term svg{width:15px; height:15px;}
.raas-plan > p{margin:0; color:var(--muted); font-size:15px; line-height:1.6;}
.raas-price{margin-top:auto; padding-top:18px; border-top:1px dashed var(--line); font:700 12px/1.3 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.raas-plan .btn{justify-content:center;}
.raas-plan.is-hot{border:1.5px solid transparent; background:linear-gradient(180deg,#22383e,#152226) padding-box, conic-gradient(from var(--raas-ang), var(--accent), rgba(95,208,198,.12) 25%, var(--cyan) 50%, rgba(95,208,198,.12) 75%, var(--accent)) border-box; box-shadow:0 34px 80px -36px rgba(95,208,198,.45);}
.raas-plan.is-hot.is-live{animation:raasSpin 7s linear infinite;}
.raas-badge{position:absolute; top:-13px; right:22px; background:var(--accent); color:#08191e; font:800 11px/1 var(--font-display); letter-spacing:.12em; text-transform:uppercase; padding:7px 11px; border-radius:999px;}
.raas-swipe{display:none;}

/* ---------- Τελικό κάλεσμα ---------- */
.raas-cta{padding-top:clamp(40px,6vh,80px);}
.raas-cta-box{position:relative; overflow:hidden; border-radius:28px; border:1px solid var(--line); padding:clamp(32px,4.5vw,68px); background:radial-gradient(120% 140% at 100% 0%, rgba(95,208,198,.22), transparent 55%), linear-gradient(160deg,#1f3136,#121c20); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center;}
.raas-cta-box h2{font:800 clamp(28px,3.2vw,46px)/1.1 var(--font-display); letter-spacing:-.02em; color:#fff; margin:0 0 14px; text-wrap:balance;}
.raas-cta-box p{margin:0 0 26px; color:var(--muted); max-width:50ch; line-height:1.65; font-size:16.5px;}
.raas-hug{position:relative; flex:none; width:310px; aspect-ratio:1; display:grid; place-items:center;}
.raas-orbit{position:absolute; inset:0;}
.raas-hug.is-live .raas-orbit{animation:raasOrbit 22s linear infinite;}
.raas-orbit svg{width:100%; height:100%; display:block; overflow:visible;}
.raas-orb{fill:none; stroke:var(--line); stroke-width:.5; stroke-dasharray:1.4 2.6;}
.raas-sat{fill:var(--cyan);}
.raas-ring{position:absolute; inset:14%; border:1.5px solid var(--accent); border-radius:50%; opacity:.18;}
.raas-ring.r1{transform:scale(1.1);} .raas-ring.r2{transform:scale(1.2);} .raas-ring.r3{transform:scale(1.3);}
.raas-hug.is-live .raas-ring{animation:raasWave 3.6s var(--ease) infinite;}
.raas-hug.is-live .raas-ring.r2{animation-delay:1.2s;}
.raas-hug.is-live .raas-ring.r3{animation-delay:2.4s;}
.raas-hug-photo{position:relative; z-index:2; width:72%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--panel); outline:2px solid var(--accent); outline-offset:6px; box-shadow:0 0 0 16px rgba(95,208,198,.07), 0 34px 70px -24px rgba(0,0,0,.7);}
.raas-hug-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease);}
.raas-hug:hover .raas-hug-photo img{transform:scale(1.07);}

@keyframes raasPop{from{transform:scale(0);} 70%{transform:scale(1.25);}}
@keyframes raasChargeX{from{transform:translateX(-100%);} to{transform:translateX(560%);}}
@keyframes raasChargeY{from{transform:translateY(-100%);} to{transform:translateY(560%);}}
@keyframes raasVia{0%,100%{background:var(--bg); box-shadow:0 0 0 4px var(--bg);} 4%{background:var(--cyan); box-shadow:0 0 0 4px var(--bg), 0 0 20px 5px rgba(124,230,219,.6);} 14%{background:var(--bg); box-shadow:0 0 0 4px var(--bg);}}
@keyframes raasSpin{to{--raas-ang:360deg;}}
@keyframes raasOrbit{to{transform:rotate(360deg);}}
@keyframes raasWave{0%{transform:scale(1); opacity:.75;} 100%{transform:scale(1.38); opacity:0;}}

/* ================= Τηλέφωνο όρθιο ================= */
@media (max-width:880px){
  .raas-sec{padding-block:40px;}
  .raas-hero{padding:22px 0 36px;}
  .raas-hero-grid{grid-template-columns:minmax(0,1fr); gap:24px;}
  .raas-kicker{margin-bottom:10px;}
  .raas-h1{font-size:clamp(30px,8.4vw,44px); margin-bottom:14px;}
  .raas-lead{font-size:15.5px; line-height:1.6; margin-bottom:20px;}
  .raas-btns .btn{flex:1 1 auto; justify-content:center;}
  .raas-facts{margin-top:18px; gap:8px 16px;}
  .raas-facts li{font-size:14px;}
  .raas-photo{border-radius:18px;}
  .raas-photo img{padding:3% 3% 0;}
  .raas-ticket-wrap{width:calc(100% - 20px); margin-top:-22px;}
  .raas-ticket{--stub:112px;}
  .raas-tk-main{padding:14px 14px 15px 16px;}
  .raas-tk-list{gap:8px;}
  .raas-tk-stub{padding:14px 10px 14px 12px;}
  .raas-sub{font-size:15.5px; line-height:1.6;}
  .raas-head .big{margin-bottom:10px;}

  .raas-wins{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:20px;}
  .raas-win{padding:16px; gap:14px;}
  .raas-win .raas-ico{width:40px; height:40px; border-radius:11px;}
  .raas-win .raas-ico svg{width:21px; height:21px;}
  .raas-win h3{font-size:17px; margin-bottom:4px;}
  .raas-win p{font-size:14.5px; line-height:1.55;}
  .raas-gain-cards{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:12px;}
  .raas-gain{padding:20px 18px; gap:11px;}
  .raas-gain h3{font-size:20px;}

  .raas-inc-grid{grid-template-columns:minmax(0,1fr); margin-top:20px; border-radius:16px;}
  .raas-inc-card{padding:16px; display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; row-gap:4px;}
  .raas-inc-card .raas-ico{grid-row:1 / span 2; width:40px; height:40px; border-radius:11px;}
  .raas-inc-card .raas-ico svg{width:21px; height:21px;}
  .raas-inc-card h3{margin:1px 0 0; font-size:16.5px;}
  .raas-inc-card p{font-size:14.5px; line-height:1.55;}

  .raas-steps-wrap{margin-top:22px;}
  .raas-trace{left:8px; right:auto; top:9px; bottom:12px; width:2px; height:auto; background:linear-gradient(180deg, var(--accent-dim), var(--line));}
  .raas-trace i{left:0; right:0; width:auto; top:0; bottom:auto; height:18%; background:linear-gradient(180deg, transparent, var(--cyan) 65%, #fff, transparent); transform:translateY(-100%);}
  .raas-steps-wrap.is-live .raas-trace i{animation-name:raasChargeY;}
  .raas-steps{grid-auto-flow:row; grid-template-columns:minmax(0,1fr); gap:18px;}
  .raas-step{padding-top:0; padding-left:42px;}
  .raas-via{top:2px;}
  .raas-n{margin-bottom:6px;}
  .raas-step h3{font-size:17.5px; margin-bottom:4px;}
  .raas-step p{font-size:14.5px;}

  .raas-plan-grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:14px -20px 0; padding:14px 20px 8px; scroll-padding-inline:20px; scrollbar-width:none;}
  .raas-plan-grid::-webkit-scrollbar{display:none;}
  .raas-plan{scroll-snap-align:start; padding:20px 18px; gap:11px;}
  .raas-plan .raas-ticks{gap:8px;}
  .raas-price{padding-top:14px;}
  .raas-swipe{display:block; margin:4px 0 0; color:var(--muted); font:700 11.5px/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase;}

  .raas-cta-box{grid-template-columns:minmax(0,1fr); gap:4px; text-align:center; border-radius:20px; padding:26px 20px 24px;}
  .raas-cta-box h2{font-size:clamp(26px,7.4vw,34px); margin-bottom:10px;}
  .raas-cta-box p{margin:0 auto 20px; font-size:15.5px;}
  .raas-cta-box .raas-btns{flex-direction:column; gap:10px;}
  .raas-cta-box .btn{width:100%; justify-content:center;}
  .raas-hug{order:-1; width:min(220px,66%); margin:0 auto 12px;}
}

/* ================= Τηλέφωνο οριζόντια ================= */
@media (max-height:520px){
  .raas-sec{padding-block:30px;}
  .raas-hero{padding:16px 0 30px;}
  .raas-hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:22px; align-items:start;}
  .raas-h1{font-size:30px; margin-bottom:14px;}
  .raas-lead{font-size:15px; margin-bottom:18px;}
  .raas-facts{margin-top:18px;}
  .raas-btns .btn{flex:0 1 auto; padding:13px 18px; font-size:13px;}
  .raas-ticket-wrap{width:calc(100% - 16px); margin-top:-18px;}
  .raas-ticket{--stub:100px;}
  .raas-tk-main{padding:12px 12px 13px 14px;}
  .raas-tk-title{font-size:11px; margin-bottom:9px;}
  .raas-tk-list{gap:6px;}
  .raas-tk-list li{font-size:12.5px; gap:7px;}
  .raas-tk-stub{padding:12px 9px 12px 11px; gap:8px;}
  .raas-head .big{font-size:28px;}
  .raas-wins, .raas-gain-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .raas-inc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .raas-trace{left:9px; right:0; top:8px; bottom:auto; width:auto; height:2px; background:linear-gradient(90deg, var(--accent-dim), var(--line));}
  .raas-trace i{top:0; bottom:0; left:0; right:auto; width:18%; height:auto; background:linear-gradient(90deg, transparent, var(--cyan) 65%, #fff, transparent); transform:translateX(-100%);}
  .raas-steps-wrap.is-live .raas-trace i{animation-name:raasChargeX;}
  .raas-steps{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(0,1fr); gap:14px;}
  .raas-step{padding-top:36px; padding-left:0;}
  .raas-via{top:0;}
  .raas-step h3{font-size:16px;}
  .raas-step p{font-size:13px;}
  .raas-plan-grid{grid-auto-columns:47%;}
  .raas-cta-box{grid-template-columns:minmax(0,1fr) auto; gap:24px; text-align:left;}
  .raas-cta-box p{margin-inline:0;}
  .raas-cta-box .raas-btns{flex-direction:row;}
  .raas-cta-box .btn{width:auto;}
  .raas-hug{order:0; width:190px; margin:0;}
}

@media (prefers-reduced-motion: reduce){
  .raas-sec *, .raas-sec *::before, .raas-sec *::after{animation:none !important; transition:none !important;}
  .raas-plan.is-hot{animation:none !important; --raas-ang:40deg;}
  .raas-trace i{display:none;}
  .raas-photo:hover img, .raas-hug:hover .raas-hug-photo img{transform:none;}
}