/* ==========================================
   PANO1
   STYLE.CSS
   PART 1
========================================== */

:root{

--bg:#06111f;
--bg2:#081726;
--bg3:#0c2238;

--panel:#0b1b2f;
--panel2:#10243d;

--blue:#2cbcff;
--blue2:#00d0ff;
--orange:#ff8b16;
--orange2:#ffb338;

--white:#ffffff;

--text:#e9f2ff;
--muted:#9bb5d1;

--line:rgba(255,255,255,.08);

--radius:28px;

--shadow-blue:
0 0 25px rgba(44,188,255,.18);

--shadow-orange:
0 0 25px rgba(255,140,22,.18);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:
Inter,
Arial,
sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.6;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1320px,92%);

margin:auto;

}

/* ==========================================
   BACKGROUND
========================================== */

.bg-grid{

position:fixed;

inset:0;

z-index:-10;

background:

linear-gradient(
rgba(255,255,255,.02) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.02) 1px,
transparent 1px
);

background-size:

60px 60px;

}

.bg-glow{

position:fixed;

border-radius:50%;

filter:blur(180px);

z-index:-9;

pointer-events:none;

}

.glow-1{

width:700px;
height:700px;

left:-250px;
top:-200px;

background:#00bfff;

opacity:.08;

}

.glow-2{

width:800px;
height:800px;

right:-300px;
bottom:-300px;

background:#005eff;

opacity:.08;

}

/* ==========================================
   HEADER
========================================== */

header{

position:fixed;

top:0;
left:0;
right:0;

z-index:1000;

padding:20px 0;

transition:.35s;

}

header.scrolled{

background:

rgba(5,15,26,.92);

backdrop-filter:

blur(18px);

border-bottom:

1px solid rgba(255,255,255,.05);

}

.header-inner{

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;

}

.logo{

display:flex;

align-items:center;

}

.logo img{

height:58px;

width:auto;

transition:.4s;

}

.logo:hover img{

transform:scale(1.05);

}

header nav{

display:flex;

gap:30px;

}

header nav a{

font-size:15px;

font-weight:600;

color:#cde1f6;

transition:.3s;

}

header nav a:hover{

color:var(--blue);

}

.header-contacts{

display:flex;

gap:18px;

align-items:center;

}

.header-contacts a{

font-size:14px;

font-weight:600;

}

.header-btn{

height:54px;

padding:0 28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:

linear-gradient(
90deg,
var(--orange),
var(--orange2)
);

color:white;

font-weight:700;

box-shadow:

var(--shadow-orange);

}

/* ==========================================
   HERO
========================================== */

.hero{

position:relative;

padding-top:170px;

padding-bottom:120px;

}

.hero-grid{

display:grid;

grid-template-columns:

1.05fr .95fr;

gap:70px;

align-items:center;

}

.hero-badge{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

background:

rgba(44,188,255,.1);

border:

1px solid rgba(44,188,255,.2);

color:var(--blue);

font-size:14px;

font-weight:700;

margin-bottom:24px;

}

.hero h1{

font-size:82px;

line-height:1.02;

font-weight:900;

letter-spacing:-3px;

margin-bottom:24px;

}

.hero h1 span{

display:block;

color:var(--blue);

}

.hero h1 strong{

display:block;

background:

linear-gradient(
180deg,
#ffffff,
#bfe7ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

max-width:650px;

font-size:20px;

line-height:1.9;

color:#c8ddf3;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:35px;

}

.btn{

height:62px;

padding:0 34px;

border-radius:18px;

display:inline-flex;

align-items:center;

justify-content:center;

font-weight:700;

transition:.35s;

position:relative;

overflow:hidden;

}

.btn-orange{

background:

linear-gradient(
90deg,
var(--orange),
var(--orange2)
);

color:white;

}

.btn-blue{

background:

rgba(44,188,255,.08);

border:

1px solid rgba(44,188,255,.2);

color:var(--blue);

}

.btn:hover{

transform:translateY(-3px);

}
/* ==========================================
   HERO PRICE
========================================== */

.hero-price{

display:inline-flex;

flex-direction:column;

padding:24px 30px;

border-radius:24px;

background:

rgba(8,22,40,.7);

border:

1px solid rgba(255,255,255,.06);

backdrop-filter:blur(20px);

margin-bottom:35px;

}

.hero-price span{

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--muted);

margin-bottom:10px;

}

.hero-price strong{

font-size:52px;

font-weight:900;

color:#ffbe4f;

text-shadow:

0 0 35px rgba(255,190,79,.35);

line-height:1;

}

/* ==========================================
   HERO STATS
========================================== */

.hero-stats{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-stat{

padding:18px 22px;

border-radius:20px;

background:

rgba(255,255,255,.03);

border:

1px solid rgba(255,255,255,.05);

min-width:170px;

}

.hero-stat strong{

display:block;

font-size:32px;

font-weight:900;

color:var(--blue);

margin-bottom:8px;

}

.hero-stat span{

font-size:13px;

color:#bdd4ea;

line-height:1.5;

}

/* ==========================================
   HERO VIDEO
========================================== */

.hero-video-frame{

position:relative;

overflow:hidden;

border-radius:32px;

background:

rgba(8,22,40,.75);

border:

1px solid rgba(44,188,255,.15);

box-shadow:

0 0 40px rgba(44,188,255,.15);

min-height:650px;

display:flex;

align-items:center;

justify-content:center;

backdrop-filter:blur(25px);

}

.hero-video-frame video{

width:100%;

height:100%;

object-fit:cover;

position:absolute;

inset:0;

}

.hero-video-frame::before{

content:"";

position:absolute;

top:-100%;

left:-20%;

width:35%;

height:300%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);

transform:rotate(18deg);

animation:

scanLine 8s linear infinite;

z-index:2;

}

@keyframes scanLine{

0%{

left:-40%;

}

100%{

left:160%;

}

}

.video-overlay{

position:relative;

z-index:3;

display:flex;

flex-direction:column;

align-items:center;

gap:14px;

}

.video-step{

padding:14px 24px;

border-radius:18px;

background:

rgba(0,0,0,.35);

backdrop-filter:blur(10px);

font-weight:700;

border:

1px solid rgba(255,255,255,.08);

}

.video-step.active{

background:

rgba(44,188,255,.15);

border-color:

rgba(44,188,255,.35);

box-shadow:

0 0 25px rgba(44,188,255,.2);

}

.video-arrow{

font-size:28px;

font-weight:900;

color:var(--blue);

}

/* ==========================================
   PROCESS
========================================== */

.process{

padding:140px 0;

}

.process h2{

text-align:center;

font-size:58px;

font-weight:900;

margin-bottom:70px;

}

.process-grid{

display:grid;

grid-template-columns:

1fr 80px 1fr 80px 1fr;

gap:20px;

align-items:start;

}

.process-arrow{

display:flex;

align-items:center;

justify-content:center;

font-size:44px;

font-weight:900;

color:var(--blue);

height:100%;

}

.process-card{

background:

rgba(8,22,40,.75);

border:

1px solid rgba(255,255,255,.06);

border-radius:30px;

padding:30px;

backdrop-filter:blur(20px);

transition:.35s;

}

.process-card:hover{

transform:translateY(-8px);

border-color:

rgba(44,188,255,.25);

box-shadow:

0 0 35px rgba(44,188,255,.12);

}

.card-number{

width:56px;

height:56px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:900;

font-size:24px;

background:

linear-gradient(
180deg,
var(--blue),
#008cff
);

color:white;

margin-bottom:22px;

}

.process-card h3{

font-size:28px;

margin-bottom:24px;

font-weight:800;

}

.process-card img{

width:100%;

border-radius:20px;

margin-bottom:20px;

}

.process-card p{

line-height:1.8;

color:#c8dcf0;

}

/* ==========================================
   BEFORE / AFTER
========================================== */

.compare-slider{

position:relative;

overflow:hidden;

border-radius:22px;

height:320px;

margin-bottom:20px;

cursor:ew-resize;

}

.compare-after{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}

.compare-before{

position:absolute;

top:0;
left:0;

width:50%;
height:100%;

overflow:hidden;

border-right:

2px solid white;

}

.compare-before img{

width:100%;

height:100%;

object-fit:cover;

}

.compare-handle{

position:absolute;

top:50%;

left:50%;

transform:

translate(-50%,-50%);

width:56px;

height:56px;

border-radius:50%;

background:white;

color:#0a1522;

font-weight:900;

display:flex;

align-items:center;

justify-content:center;

z-index:5;

box-shadow:

0 0 20px rgba(255,255,255,.35);

}
/* ==========================================
   PORTFOLIO
========================================== */

.portfolio{

padding:140px 0;

}

.portfolio h2{

text-align:center;

font-size:58px;

font-weight:900;

margin-bottom:70px;

}

.portfolio-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}

.portfolio-card{

position:relative;

overflow:hidden;

border-radius:30px;

background:var(--panel);

border:

1px solid rgba(255,255,255,.06);

cursor:pointer;

}

.portfolio-card img{

width:100%;

height:420px;

object-fit:cover;

transition:1s;

}

.portfolio-card:hover img{

transform:scale(1.08);

}

.portfolio-card::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
transparent,
rgba(0,0,0,.75)
);

}

.portfolio-info{

position:absolute;

left:25px;

right:25px;

bottom:25px;

z-index:2;

}

.portfolio-info h3{

font-size:28px;

margin-bottom:8px;

font-weight:800;

}

.portfolio-info span{

color:#b9d3ec;

}

/* ==========================================
   TOUR BLOCK
========================================== */

.tour-block{

padding:150px 0;

}

.tour-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:80px;

align-items:center;

}

.tour-left h2{

font-size:58px;

font-weight:900;

margin-bottom:50px;

}

.phone-wrapper{

position:relative;

width:430px;

margin:auto;

}

.phone-image{

width:100%;

filter:

drop-shadow(
0 0 40px rgba(44,188,255,.18)
);

}

.mini-plan{

position:absolute;

right:20px;

bottom:20px;

width:110px;

padding:8px;

border-radius:18px;

background:

rgba(8,22,40,.92);

border:

1px solid rgba(44,188,255,.25);

box-shadow:

0 0 25px rgba(44,188,255,.18);

z-index:5;

}

/* ==========================================
   TOUR FEATURES
========================================== */

.tour-right{

display:grid;

gap:18px;

}

.tour-feature{

padding:22px 24px;

border-radius:20px;

background:

rgba(255,255,255,.03);

border:

1px solid rgba(255,255,255,.05);

font-size:18px;

font-weight:600;

transition:.35s;

}

.tour-feature:hover{

transform:translateX(8px);

border-color:

rgba(44,188,255,.25);

}

/* ==========================================
   WORKFLOW
========================================== */

.workflow{

padding:140px 0;

}

.workflow h2{

text-align:center;

font-size:58px;

font-weight:900;

margin-bottom:70px;

}

.workflow-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}

.workflow-item{

padding:35px;

border-radius:28px;

background:

rgba(8,22,40,.75);

border:

1px solid rgba(255,255,255,.06);

transition:.35s;

}

.workflow-item:hover{

transform:translateY(-8px);

box-shadow:

0 0 35px rgba(44,188,255,.15);

border-color:

rgba(44,188,255,.25);

}

.workflow-icon{

font-size:46px;

margin-bottom:22px;

}

.workflow-item h3{

font-size:26px;

margin-bottom:14px;

font-weight:800;

}

.workflow-item p{

line-height:1.8;

color:#c6dbef;

}

/* ==========================================
   PRICE
========================================== */

.price-section{

padding:160px 0;

}

.price-card{

position:relative;

padding:90px;

border-radius:40px;

text-align:center;

background:

rgba(8,22,40,.78);

border:

1px solid rgba(44,188,255,.12);

overflow:hidden;

}

.price-card::before{

content:"";

position:absolute;

left:-30%;

top:-100%;

width:40%;

height:320%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);

transform:rotate(18deg);

animation:

priceLight 8s linear infinite;

}

@keyframes priceLight{

0%{

left:-40%;

}

100%{

left:160%;

}

}

.price-title{

font-size:22px;

letter-spacing:3px;

color:#9fc4e7;

margin-bottom:20px;

text-transform:uppercase;

}

.price-value{

font-size:110px;

font-weight:900;

line-height:1;

margin-bottom:35px;

background:

linear-gradient(
180deg,
#ffd977,
#ff9a1a
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.price-list{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

.price-list div{

padding:14px 18px;

border-radius:16px;

background:

rgba(255,255,255,.04);

}

/* ==========================================
   NUMBERS
========================================== */

.numbers{

padding:140px 0;

}

.numbers-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:25px;

}

.numbers-grid div{

padding:40px;

text-align:center;

border-radius:28px;

background:

rgba(8,22,40,.72);

border:

1px solid rgba(255,255,255,.06);

}

.numbers-grid strong{

display:block;

font-size:64px;

font-weight:900;

color:var(--blue);

margin-bottom:12px;

}

.numbers-grid span{

color:#c6daee;

}
/* ==========================================
   CONTACTS
========================================== */

.contacts{

padding:140px 0;

}

.contacts h2{

text-align:center;

font-size:58px;

font-weight:900;

margin-bottom:70px;

}

.contacts-grid{

display:grid;

grid-template-columns:

420px 1fr;

gap:60px;

align-items:start;

}

.contacts-left{

display:flex;

flex-direction:column;

gap:24px;

}

.contacts-left a{

font-size:34px;

font-weight:800;

transition:.3s;

}

.contacts-left a:hover{

color:var(--blue);

}

.contacts-left p{

font-size:18px;

line-height:1.9;

color:#c4d9ee;

}

.contacts-form{

padding:40px;

border-radius:30px;

background:

rgba(8,22,40,.75);

border:

1px solid rgba(255,255,255,.06);

}

.contacts-form form{

display:grid;

gap:18px;

}

.contacts-form input,
.contacts-form textarea{

width:100%;

padding:18px 22px;

border-radius:18px;

border:none;

outline:none;

background:

rgba(255,255,255,.05);

color:white;

font-size:16px;

}

.contacts-form textarea{

height:180px;

resize:none;

}

.contacts-form button{

height:64px;

border:none;

border-radius:18px;

cursor:pointer;

font-weight:700;

background:

linear-gradient(
90deg,
var(--orange),
var(--orange2)
);

color:white;

}

/* ==========================================
   FOOTER
========================================== */

footer{

padding:90px 0 40px;

border-top:

1px solid rgba(255,255,255,.05);

background:

rgba(5,15,25,.8);

}

.footer-grid{

display:grid;

grid-template-columns:

1.5fr 1fr 1fr;

gap:60px;

}

.footer-logo{

width:180px;

margin-bottom:20px;

}

.footer-grid p{

max-width:400px;

color:#bdd3ea;

line-height:1.9;

}

.footer-grid h4{

font-size:24px;

margin-bottom:20px;

font-weight:800;

}

.footer-grid ul{

display:grid;

gap:12px;

}

.footer-grid li{

color:#d1e3f5;

}

.footer-grid a{

display:block;

margin-bottom:14px;

}

.footer-bottom{

margin-top:50px;

padding-top:30px;

border-top:

1px solid rgba(255,255,255,.05);

text-align:center;

color:#8ca9c8;

}

/* ==========================================
   FLOATING TELEGRAM
========================================== */

.floating-contact{

position:fixed;

right:30px;

bottom:30px;

z-index:999;

}

.floating-contact a{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:30px;

background:

linear-gradient(
180deg,
#2cbcff,
#0077ff
);

box-shadow:

0 0 35px rgba(44,188,255,.35);

animation:

telegramPulse 2s infinite;

}

@keyframes telegramPulse{

0%{transform:scale(1);}
50%{transform:scale(1.08);}
100%{transform:scale(1);}

}

/* ==========================================
   MODAL
========================================== */

.modal-overlay{

position:fixed;

inset:0;

background:

rgba(0,0,0,.75);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

}

.modal-overlay.active{

opacity:1;

visibility:visible;

}

.modal{

width:min(620px,92%);

padding:40px;

border-radius:30px;

background:

rgba(8,22,40,.96);

border:

1px solid rgba(44,188,255,.15);

position:relative;

}

.modal h3{

font-size:34px;

margin-bottom:25px;

}

.modal-close{

position:absolute;

top:20px;

right:20px;

width:42px;

height:42px;

border:none;

border-radius:50%;

cursor:pointer;

background:

rgba(255,255,255,.08);

color:white;

font-size:22px;

}

.modal-form{

display:grid;

gap:18px;

}

.modal-form input,
.modal-form textarea{

padding:18px;

border:none;

outline:none;

border-radius:18px;

background:

rgba(255,255,255,.05);

color:white;

}

.modal-form textarea{

height:150px;

resize:none;

}

.modal-form button{

height:60px;

border:none;

border-radius:18px;

cursor:pointer;

font-weight:700;

background:

linear-gradient(
90deg,
var(--orange),
var(--orange2)
);

color:white;

}

/* ==========================================
   CURSOR GLOW
========================================== */

.cursor-glow{

position:fixed;

width:18px;

height:18px;

border-radius:50%;

background:var(--blue);

pointer-events:none;

transform:translate(-50%,-50%);

box-shadow:

0 0 20px var(--blue),
0 0 40px var(--blue);

z-index:99999;

opacity:.5;

}

/* ==========================================
   PARTICLES
========================================== */

.particles{

position:fixed;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:-1;

}

.particle{

position:absolute;

width:3px;

height:3px;

border-radius:50%;

background:var(--blue);

box-shadow:

0 0 15px var(--blue);

animation:

particleMove linear infinite;

}

@keyframes particleMove{

0%{

transform:translateY(0);

opacity:0;

}

20%{

opacity:.8;

}

100%{

transform:translateY(-250px);

opacity:0;

}

}

/* ==========================================
   HELPERS
========================================== */

.hidden{

opacity:0;

transform:translateY(50px);

transition:

opacity .8s,
transform .8s;

}

.visible{

opacity:1;

transform:none;

}

.scroll-progress{

position:fixed;

top:0;

left:0;

height:3px;

width:0;

z-index:99999;

background:

linear-gradient(
90deg,
var(--blue),
#00ffff
);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1200px){

.hero h1{

font-size:68px;

}

.process-grid{

grid-template-columns:1fr;

}

.process-arrow{

display:none;

}

}

@media(max-width:992px){

.hero-grid,
.tour-grid,
.contacts-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.workflow-grid{

grid-template-columns:1fr 1fr;

}

.numbers-grid{

grid-template-columns:1fr 1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.hero-video-frame{

min-height:500px;

}

}

@media(max-width:768px){

.hero{

padding-top:130px;

}

.hero h1{

font-size:48px;

letter-spacing:-1px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.hero-price strong{

font-size:38px;

}

.workflow-grid{

grid-template-columns:1fr;

}

.price-card{

padding:50px 25px;

}

.price-value{

font-size:64px;

}

.contacts h2,
.process h2,
.portfolio h2,
.workflow h2{

font-size:40px;

}

.phone-wrapper{

width:280px;

}

.mini-plan{

width:80px;

}

.cursor-glow{

display:none;

}

}

@media(max-width:480px){

.hero-stat{

width:100%;

}

.numbers-grid{

grid-template-columns:1fr;

}

.floating-contact{

right:20px;

bottom:20px;

}

.floating-contact a{

width:58px;

height:58px;

font-size:24px;

}

}