/*============================================================

            CYBERIVOX TECH
        PREMIUM RED NEON THEME

============================================================*/

/*============================================================
                        GOOGLE FONT
============================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/*============================================================
                        ROOT
============================================================*/

:root{

--red:#ff003c;
--red-light:#ff2758;
--red-dark:#92001f;

--black:#040404;
--black2:#0d0d0d;
--black3:#141414;

--white:#ffffff;

--gray:#bcbcbc;

--glass:rgba(255,255,255,.05);

--border:rgba(255,0,60,.35);

--shadow:
0 0 10px rgba(255,0,60,.25),
0 0 30px rgba(255,0,60,.15);

--transition:.35s ease;

--radius:20px;

--container:1400px;

}

/*============================================================
                    RESET
============================================================*/

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:#050505;

color:white;

overflow-x:hidden;

line-height:1.7;

}

/*============================================================
                    SCROLLBAR
============================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#090909;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#ff003c,
#6f0018
);

border-radius:20px;

}

/*============================================================
                    TEXT SELECTION
============================================================*/

::selection{

background:#ff003c;

color:white;

}

/*============================================================
                    CONTAINER
============================================================*/

.container{

width:90%;

max-width:1400px;

margin:auto;

}

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

body::before{

content:"";

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,0,60,.08) 1px,transparent 1px),

linear-gradient(90deg,
rgba(255,0,60,.08) 1px,
transparent 1px);

background-size:50px 50px;

opacity:.30;

z-index:-10;

}

body::after{

content:"";

position:fixed;

width:700px;

height:700px;

background:#ff003c;

filter:blur(220px);

opacity:.12;

top:-250px;

right:-200px;

z-index:-11;

}

/*============================================================
                    PRELOADER
============================================================*/

#loader{

position:fixed;

inset:0;

background:#040404;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:99999;

}

.loader-circle{

width:90px;

height:90px;

border-radius:50%;

border:4px solid rgba(255,255,255,.1);

border-top:4px solid var(--red);

animation:spin 1s linear infinite;

box-shadow:var(--shadow);

}

#loader h1{

margin-top:25px;

font-family:'Poppins',sans-serif;

letter-spacing:4px;

font-size:26px;

color:white;

text-shadow:

0 0 20px #ff003c;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*============================================================
                    PROGRESS BAR
============================================================*/

#progress-bar{

position:fixed;

left:0;

top:0;

height:4px;

width:0;

background:linear-gradient(
90deg,
#ff003c,
#ff567d);

z-index:99999;

box-shadow:

0 0 20px #ff003c;

}

/*============================================================
                    NAVBAR
============================================================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:18px 0;

backdrop-filter:blur(20px);

background:rgba(5,5,5,.55);

border-bottom:1px solid rgba(255,0,60,.15);

}

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

width:90%;

max-width:1400px;

margin:auto;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

width:52px;

}

.logo h2{

font-family:'Poppins',sans-serif;

font-size:24px;

font-weight:700;

}

.logo span{

color:var(--red);

text-shadow:

0 0 20px var(--red);

}

.nav-links{

display:flex;

gap:35px;

list-style:none;

}

.nav-links a{

text-decoration:none;

color:white;

font-weight:500;

transition:var(--transition);

position:relative;

}

.nav-links a:hover{

color:var(--red);

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--red);

transition:.35s;

}

.nav-links a:hover::after{

width:100%;

}
/*============================================================
                        HERO SECTION
============================================================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

padding-top:130px;

padding-bottom:80px;

overflow:hidden;

}

.hero-container{

width:90%;

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

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

.hero-left{

position:relative;

z-index:5;

}

.hero-badge{

display:inline-flex;

align-items:center;

padding:10px 22px;

border-radius:50px;

border:1px solid rgba(255,0,60,.35);

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

backdrop-filter:blur(20px);

margin-bottom:35px;

box-shadow:var(--shadow);

}

.hero-badge span{

font-size:13px;

font-weight:600;

letter-spacing:2px;

color:var(--red);

font-family:'Poppins',sans-serif;

}

.hero-left h1{

font-size:68px;

font-family:'Poppins',sans-serif;

font-weight:800;

line-height:1.15;

margin-bottom:30px;

}

.hero-left h1 span{

color:var(--red);

text-shadow:

0 0 20px rgba(255,0,60,.7),

0 0 40px rgba(255,0,60,.5),

0 0 60px rgba(255,0,60,.3);

}

.hero-left p{

max-width:620px;

font-size:18px;

color:#d0d0d0;

margin-bottom:40px;

line-height:1.9;

}

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

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

flex-wrap:wrap;

}

.btn-red{

padding:18px 36px;

background:linear-gradient(
135deg,
#ff003c,
#96001f
);

border:none;

border-radius:50px;

text-decoration:none;

font-weight:700;

color:white;

transition:.35s;

box-shadow:

0 0 30px rgba(255,0,60,.35);

}

.btn-red:hover{

transform:translateY(-8px);

box-shadow:

0 15px 40px rgba(255,0,60,.45);

}

.btn-transparent{

padding:18px 36px;

border-radius:50px;

border:1px solid rgba(255,0,60,.4);

text-decoration:none;

color:white;

backdrop-filter:blur(20px);

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

transition:.35s;

}

.btn-transparent:hover{

background:rgba(255,0,60,.1);

transform:translateY(-8px);

}

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

.hero-stats{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.stat{

width:180px;

padding:28px;

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

backdrop-filter:blur(20px);

border:1px solid rgba(255,0,60,.25);

border-radius:22px;

transition:.35s;

}

.stat:hover{

transform:translateY(-10px);

border-color:var(--red);

box-shadow:var(--shadow);

}

.stat h2{

font-size:34px;

font-family:'Poppins',sans-serif;

margin-bottom:10px;

color:var(--red);

}

.stat p{

font-size:15px;

color:#d5d5d5;

margin:0;

}

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

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

height:700px;

}

/*============================================================
                    AI ORB
============================================================*/

.ai-orb{

position:relative;

width:420px;

height:420px;

display:flex;

justify-content:center;

align-items:center;

}

.core{

width:120px;

height:120px;

border-radius:50%;

background:

radial-gradient(circle,
#ff5379,
#ff003c 40%,
#520013);

box-shadow:

0 0 40px #ff003c,

0 0 90px rgba(255,0,60,.6),

0 0 160px rgba(255,0,60,.4);

animation:pulse 3s infinite ease-in-out;

}

.ring{

position:absolute;

border-radius:50%;

border:1px solid rgba(255,0,60,.4);

}

.ring1{

width:170px;

height:170px;

animation:rotate1 12s linear infinite;

}

.ring2{

width:240px;

height:240px;

animation:rotate2 16s linear infinite reverse;

}

.ring3{

width:320px;

height:320px;

animation:rotate1 20s linear infinite;

}

/*============================================================
                    FLOATING CARDS
============================================================*/

.floating-card{

position:absolute;

width:210px;

padding:24px;

border-radius:22px;

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

border:1px solid rgba(255,0,60,.25);

backdrop-filter:blur(25px);

box-shadow:var(--shadow);

animation:float 5s ease-in-out infinite;

}

.floating-card h3{

font-size:18px;

margin-bottom:12px;

color:white;

}

.floating-card p{

font-size:14px;

color:#cfcfcf;

line-height:1.7;

}

.card1{

top:20px;

left:-40px;

}

.card2{

right:-30px;

top:180px;

animation-delay:1s;

}

.card3{

left:20px;

bottom:10px;

animation-delay:2s;

}

/*============================================================
                    SCROLL INDICATOR
============================================================*/

.scroll-down{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:15px;

}

.scroll-down span{

font-size:12px;

letter-spacing:3px;

font-family:'Poppins',sans-serif;

color:var(--red);

}

.mouse{

width:34px;

height:58px;

border-radius:30px;

border:2px solid rgba(255,0,60,.5);

display:flex;

justify-content:center;

padding-top:8px;

}

.wheel{

width:5px;

height:12px;

border-radius:20px;

background:var(--red);

animation:scrollWheel 1.5s infinite;

}

/*============================================================
                    ANIMATIONS
============================================================*/

@keyframes pulse{

50%{

transform:scale(1.08);

}

}

@keyframes rotate1{

100%{

transform:rotate(360deg);

}

}

@keyframes rotate2{

100%{

transform:rotate(-360deg);

}

}

@keyframes float{

50%{

transform:translateY(-15px);

}

}

@keyframes scrollWheel{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(20px);

opacity:0;

}

}
/*============================================================
                    SECTION COMMON
============================================================*/

section{

position:relative;

padding:120px 0;

}

.section-heading{

text-align:center;

max-width:850px;

margin:0 auto 80px;

}

.section-subtitle,
.section-tag{

display:inline-block;

padding:10px 22px;

border-radius:50px;

background:rgba(255,0,60,.08);

border:1px solid rgba(255,0,60,.25);

color:var(--red);

font-family:'Poppins',sans-serif;

font-size:13px;

letter-spacing:2px;

margin-bottom:22px;

text-transform:uppercase;

}

.section-heading h2{

font-size:54px;

font-family:'Poppins',sans-serif;

font-weight:800;

line-height:1.2;

margin-bottom:22px;

}

.section-heading h2 span{

color:var(--red);

text-shadow:

0 0 20px rgba(255,0,60,.55);

}

.section-heading p{

font-size:18px;

color:#c8c8c8;

line-height:1.9;

}

/*============================================================
                    ABOUT SECTION
============================================================*/

.about-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:80px;

align-items:center;

}

.glass-panel{

padding:45px;

border-radius:30px;

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

border:1px solid rgba(255,0,60,.18);

backdrop-filter:blur(25px);

box-shadow:var(--shadow);

transition:.4s;

}

.glass-panel:hover{

transform:translateY(-10px);

border-color:var(--red);

}

.glass-panel h3{

font-size:34px;

font-family:'Poppins',sans-serif;

margin-bottom:25px;

}

.glass-panel p{

font-size:17px;

color:#d3d3d3;

margin-bottom:20px;

line-height:2;

}

/*============================================================
                    ABOUT IMAGE
============================================================*/

.image-frame{

position:relative;

border-radius:30px;

overflow:hidden;

border:1px solid rgba(255,0,60,.2);

background:#0c0c0c;

box-shadow:var(--shadow);

}

.image-frame img{

width:100%;

display:block;

transition:.6s;

}

.image-frame:hover img{

transform:scale(1.05);

}

.image-glow{

position:absolute;

inset:0;

background:

linear-gradient(135deg,

rgba(255,0,60,.15),

transparent,

rgba(255,0,60,.1));

z-index:2;

pointer-events:none;

}

/*============================================================
                    STORY SECTION
============================================================*/

.story-wrapper{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.story-card{

padding:40px;

border-radius:28px;

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

border:1px solid rgba(255,0,60,.15);

backdrop-filter:blur(20px);

transition:.4s;

position:relative;

overflow:hidden;

}

.story-card:hover{

transform:translateY(-12px);

border-color:var(--red);

box-shadow:var(--shadow);

}

.story-icon{

width:70px;

height:70px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(255,0,60,.12);

font-family:'Poppins',sans-serif;

font-size:24px;

color:var(--red);

margin-bottom:25px;

}

.story-card h3{

font-size:26px;

margin-bottom:18px;

font-family:'Poppins',sans-serif;

}

.story-card p{

color:#cfcfcf;

line-height:1.9;

}

/*============================================================
                TECHNOLOGY ECOSYSTEM
============================================================*/

.ecosystem-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.eco-card{

padding:35px;

border-radius:25px;

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

border:1px solid rgba(255,0,60,.15);

transition:.35s;

backdrop-filter:blur(20px);

}

.eco-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow);

border-color:var(--red);

}

.eco-card h3{

font-size:24px;

font-family:'Poppins',sans-serif;

margin-bottom:18px;

}

.eco-card p{

line-height:1.9;

color:#d5d5d5;

}

/*============================================================
                    PURPOSE SECTION
============================================================*/

.purpose-box{

padding:70px;

text-align:center;

border-radius:35px;

background:linear-gradient(

135deg,

rgba(255,0,60,.08),

rgba(255,255,255,.03)

);

border:1px solid rgba(255,0,60,.25);

backdrop-filter:blur(25px);

box-shadow:var(--shadow);

}

.purpose-box span{

display:inline-block;

margin-bottom:20px;

color:var(--red);

font-family:'Poppins',sans-serif;

letter-spacing:2px;

}

.purpose-box h2{

font-size:52px;

font-family:'Poppins',sans-serif;

margin-bottom:30px;

line-height:1.25;

}

.purpose-box p{

max-width:900px;

margin:auto;

font-size:18px;

line-height:2;

color:#d5d5d5;

}

/*============================================================
                VISION & MISSION
============================================================*/

.vm-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

}

.vm-card{

position:relative;

padding:45px;

border-radius:30px;

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

border:1px solid rgba(255,0,60,.18);

overflow:hidden;

transition:.4s;

backdrop-filter:blur(20px);

}

.vm-card:hover{

transform:translateY(-12px);

border-color:var(--red);

box-shadow:var(--shadow);

}

.vm-number{

position:absolute;

top:20px;

right:25px;

font-size:52px;

font-family:'Poppins',sans-serif;

color:rgba(255,0,60,.12);

}

.vm-icon{

font-size:55px;

margin-bottom:30px;

}

.vm-card h3{

font-size:30px;

font-family:'Poppins',sans-serif;

margin-bottom:18px;

}

.vm-card p{

line-height:1.9;

color:#d3d3d3;

}
/*============================================================
                    CORE VALUES
============================================================*/

.values-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.value-card{

position:relative;

padding:40px;

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

border:1px solid rgba(255,0,60,.18);

border-radius:28px;

backdrop-filter:blur(20px);

transition:.4s;

overflow:hidden;

}

.value-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,0,60,.12),

transparent

);

transition:.8s;

}

.value-card:hover::before{

left:100%;

}

.value-card:hover{

transform:translateY(-12px);

border-color:var(--red);

box-shadow:var(--shadow);

}

.value-icon{

font-size:52px;

margin-bottom:25px;

}

.value-card h3{

font-family:'Poppins',sans-serif;

font-size:28px;

margin-bottom:18px;

}

.value-card p{

color:#d3d3d3;

line-height:1.9;

}

/*============================================================
                    TIMELINE
============================================================*/

.timeline{

position:relative;

max-width:1000px;

margin:auto;

}

.timeline::before{

content:"";

position:absolute;

left:30px;

top:0;

bottom:0;

width:2px;

background:linear-gradient(

180deg,

var(--red),

transparent

);

}

.timeline-item{

position:relative;

padding-left:90px;

margin-bottom:60px;

}

.timeline-dot{

position:absolute;

left:18px;

top:8px;

width:26px;

height:26px;

border-radius:50%;

background:var(--red);

box-shadow:

0 0 20px var(--red);

}

.timeline-content{

padding:35px;

border-radius:24px;

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

border:1px solid rgba(255,0,60,.18);

transition:.35s;

}

.timeline-content:hover{

border-color:var(--red);

box-shadow:var(--shadow);

transform:translateX(8px);

}

.timeline-content h3{

font-family:'Poppins',sans-serif;

margin-bottom:15px;

font-size:28px;

}

.timeline-content p{

color:#d0d0d0;

line-height:1.9;

}

/*============================================================
                    STATISTICS
============================================================*/

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.stats-card{

text-align:center;

padding:45px 25px;

border-radius:28px;

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

border:1px solid rgba(255,0,60,.18);

transition:.35s;

}

.stats-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow);

border-color:var(--red);

}

.stats-card h1{

font-size:58px;

font-family:'Poppins',sans-serif;

color:var(--red);

margin-bottom:15px;

}

.stats-card h3{

margin-bottom:12px;

font-size:22px;

}

.stats-card p{

color:#d2d2d2;

}

/*============================================================
                    WHY CHOOSE US
============================================================*/

.why-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.why-card{

position:relative;

padding:40px;

border-radius:28px;

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

border:1px solid rgba(255,0,60,.18);

transition:.4s;

overflow:hidden;

}

.why-card:hover{

transform:translateY(-12px);

border-color:var(--red);

box-shadow:var(--shadow);

}

.why-number{

font-size:58px;

font-family:'Poppins',sans-serif;

color:rgba(255,0,60,.15);

margin-bottom:20px;

}

.why-card h3{

font-size:28px;

font-family:'Poppins',sans-serif;

margin-bottom:18px;

}

.why-card p{

line-height:1.9;

color:#d0d0d0;

}

/*============================================================
                    INDUSTRIES
============================================================*/

.industry-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.industry-card{

padding:40px;

border-radius:24px;

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

border:1px solid rgba(255,0,60,.18);

text-align:center;

font-size:55px;

transition:.35s;

cursor:pointer;

}

.industry-card:hover{

transform:translateY(-10px) scale(1.04);

border-color:var(--red);

box-shadow:var(--shadow);

}

.industry-card h3{

margin-top:20px;

font-size:22px;

font-family:'Poppins',sans-serif;

}

/*============================================================
                    TECHNOLOGY STACK
============================================================*/

.tech-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.tech-card{

padding:28px;

border-radius:20px;

text-align:center;

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

border:1px solid rgba(255,0,60,.18);

font-weight:600;

font-size:18px;

transition:.35s;

font-family:'Poppins',sans-serif;

}

.tech-card:hover{

background:rgba(255,0,60,.12);

border-color:var(--red);

transform:translateY(-8px);

box-shadow:0 0 25px rgba(255,0,60,.35);

}
/*============================================================
                    SERVICES SECTION
============================================================*/

.services-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:60px;

}

.service-card{

position:relative;

padding:40px 35px;

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

border:1px solid rgba(255,0,60,.18);

border-radius:30px;

backdrop-filter:blur(25px);

overflow:hidden;

transition:.45s;

}

.service-card::before{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:250%;

height:250%;

background:linear-gradient(

135deg,

transparent,

rgba(255,0,60,.08),

transparent

);

transform:rotate(25deg);

transition:.8s;

}

.service-card:hover::before{

top:-40%;

left:-40%;

}

.service-card:hover{

transform:translateY(-15px);

border-color:var(--red);

box-shadow:

0 0 40px rgba(255,0,60,.25);

}

.service-number{

font-family:'Poppins',sans-serif;

font-size:52px;

color:rgba(255,0,60,.15);

margin-bottom:20px;

}

.service-icon{

font-size:56px;

margin-bottom:25px;

}

.service-card h3{

font-size:28px;

font-family:'Poppins',sans-serif;

margin-bottom:18px;

}

.service-card p{

color:#d2d2d2;

line-height:1.9;

margin-bottom:25px;

}

.service-card a{

color:var(--red);

font-weight:700;

text-decoration:none;

}

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

.process-timeline{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:25px;

margin-top:70px;

}

.process-card{

padding:35px 25px;

text-align:center;

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

border:1px solid rgba(255,0,60,.18);

border-radius:25px;

transition:.4s;

}

.process-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow);

border-color:var(--red);

}

.process-number{

font-size:50px;

font-family:'Poppins',sans-serif;

color:rgba(255,0,60,.18);

margin-bottom:20px;

}

.process-icon{

font-size:48px;

margin-bottom:20px;

}

.process-card h3{

font-size:24px;

margin-bottom:15px;

font-family:'Poppins',sans-serif;

}

.process-card p{

font-size:15px;

color:#d0d0d0;

line-height:1.8;

}

/*============================================================
                FEATURES GRID
============================================================*/

.features-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.feature-box{

padding:35px;

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

border:1px solid rgba(255,0,60,.18);

border-radius:28px;

transition:.35s;

}

.feature-box:hover{

transform:translateY(-10px);

border-color:var(--red);

box-shadow:var(--shadow);

}

.feature-box h3{

font-size:26px;

margin-bottom:18px;

font-family:'Poppins',sans-serif;

}

.feature-box p{

color:#d2d2d2;

line-height:1.8;

}

/*============================================================
                    CTA SECTION
============================================================*/

.cta-section{

padding:140px 0;

}

.cta-box{

padding:90px 60px;

border-radius:40px;

text-align:center;

background:

linear-gradient(

135deg,

rgba(255,0,60,.10),

rgba(255,255,255,.03)

);

border:1px solid rgba(255,0,60,.22);

backdrop-filter:blur(25px);

box-shadow:var(--shadow);

}

.cta-box span{

color:var(--red);

font-family:'Poppins',sans-serif;

letter-spacing:2px;

}

.cta-box h2{

font-size:58px;

font-family:'Poppins',sans-serif;

margin:25px 0;

}

.cta-box p{

max-width:800px;

margin:auto;

color:#d0d0d0;

line-height:2;

margin-bottom:45px;

}

/*============================================================
                    CYNORA
============================================================*/

.cynora-section{

position:relative;

overflow:hidden;

}

.cynora-wrapper{

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:50px;

align-items:center;

}

.coming-tag{

display:inline-block;

padding:10px 20px;

border-radius:50px;

border:1px solid rgba(255,0,60,.25);

background:rgba(255,0,60,.08);

color:var(--red);

font-family:'Poppins',sans-serif;

margin-bottom:25px;

}

.cynora-left h2{

font-size:72px;

font-family:'Poppins',sans-serif;

color:var(--red);

text-shadow:

0 0 20px rgba(255,0,60,.6);

margin-bottom:15px;

}

.cynora-left h3{

font-size:42px;

margin-bottom:25px;

font-family:'Poppins',sans-serif;

}

.cynora-left p{

color:#d3d3d3;

line-height:2;

margin-bottom:20px;

}

/*============================================================
                    AI CORE
============================================================*/

.ai-core{

position:relative;

width:420px;

height:420px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

}

.core-light{

width:130px;

height:130px;

border-radius:50%;

background:radial-gradient(circle,#ff547b,#ff003c,#4f0014);

box-shadow:

0 0 60px #ff003c,

0 0 120px rgba(255,0,60,.45);

animation:pulse 3s infinite;

}

.core-text{

position:absolute;

font-family:'Poppins',sans-serif;

font-size:28px;

font-weight:700;

letter-spacing:4px;

}

.ring{

position:absolute;

border-radius:50%;

border:2px solid rgba(255,0,60,.25);

}

.ring-one{width:180px;height:180px;animation:rotate1 10s linear infinite;}
.ring-two{width:250px;height:250px;animation:rotate2 15s linear infinite reverse;}
.ring-three{width:320px;height:320px;animation:rotate1 18s linear infinite;}
.ring-four{width:390px;height:390px;animation:rotate2 22s linear infinite reverse;}
.ring-five{width:460px;height:460px;animation:rotate1 26s linear infinite;}

/*============================================================
                NEWSLETTER
============================================================*/

.newsletter-box{

padding:80px;

text-align:center;

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

border:1px solid rgba(255,0,60,.18);

border-radius:35px;

}

.newsletter-form{

margin-top:35px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter-form input{

width:450px;

padding:18px 25px;

background:#111;

border:1px solid rgba(255,0,60,.25);

border-radius:50px;

color:#fff;

font-size:16px;

outline:none;

}

.newsletter-form button{

padding:18px 35px;

border:none;

border-radius:50px;

background:linear-gradient(135deg,#ff003c,#8a001d);

color:#fff;

font-weight:700;

cursor:pointer;

transition:.35s;

}

.newsletter-form button:hover{

transform:translateY(-4px);

box-shadow:0 0 30px rgba(255,0,60,.4);

}
/*============================================================
                    CONTACT SECTION
============================================================*/

.contact-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:50px;

margin-top:70px;

align-items:start;

}

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.info-card{

padding:35px;

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

border:1px solid rgba(255,0,60,.18);

border-radius:24px;

backdrop-filter:blur(20px);

transition:.35s;

}

.info-card:hover{

transform:translateY(-8px);

border-color:var(--red);

box-shadow:var(--shadow);

}

.info-card .icon{

font-size:38px;

margin-bottom:18px;

}

.info-card h3{

font-family:'Poppins',sans-serif;

margin-bottom:10px;

font-size:22px;

}

.info-card p{

color:#d4d4d4;

line-height:1.8;

}

/*============================================================
                    CONTACT FORM
============================================================*/

.contact-form-box{

padding:45px;

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

border-radius:30px;

border:1px solid rgba(255,0,60,.18);

backdrop-filter:blur(25px);

}

.input-group{

margin-bottom:25px;

}

.input-group input,
.input-group textarea{

width:100%;

padding:18px 22px;

background:#0b0b0b;

border:1px solid rgba(255,0,60,.2);

border-radius:16px;

color:#fff;

font-size:16px;

outline:none;

transition:.35s;

font-family:Poppins,sans-serif;

}

.input-group input:focus,
.input-group textarea:focus{

border-color:var(--red);

box-shadow:0 0 20px rgba(255,0,60,.25);

}

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

.footer{

padding:90px 0 30px;

background:#050505;

border-top:1px solid rgba(255,0,60,.12);

margin-top:120px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

}

.footer h2,
.footer h3{

font-family:'Poppins',sans-serif;

margin-bottom:25px;

}

.footer p{

color:#bfbfbf;

line-height:1.9;

}

.footer ul{

list-style:none;

}

.footer ul li{

margin-bottom:14px;

}

.footer ul li a{

color:#d4d4d4;

text-decoration:none;

transition:.3s;

}

.footer ul li a:hover{

color:var(--red);

}

.social-icons{

display:flex;

flex-direction:column;

gap:15px;

}

.social-icons a{

text-decoration:none;

color:#d4d4d4;

transition:.3s;

}

.social-icons a:hover{

color:var(--red);

}

.footer-bottom{

margin-top:70px;

padding-top:30px;

border-top:1px solid rgba(255,0,60,.15);

display:flex;

justify-content:space-between;

flex-wrap:wrap;

gap:20px;

}

/*============================================================
                BACK TO TOP
============================================================*/

#backToTop{

position:fixed;

right:30px;

bottom:30px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,#ff003c,#84001b);

color:#fff;

font-size:22px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:0 0 25px rgba(255,0,60,.35);

transition:.35s;

}

#backToTop:hover{

transform:translateY(-6px);

}

/*============================================================
                CUSTOM CURSOR
============================================================*/

.cursor-dot{

position:fixed;

width:8px;

height:8px;

background:#ff003c;

border-radius:50%;

pointer-events:none;

z-index:99999;

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

}

.cursor-glow{

position:fixed;

width:35px;

height:35px;

border:2px solid rgba(255,0,60,.35);

border-radius:50%;

pointer-events:none;

z-index:99998;

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

transition:.08s;

}

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

@media(max-width:1200px){

.hero-container,
.about-grid,
.cynora-wrapper,
.contact-wrapper{

grid-template-columns:1fr;

}

.services-grid,
.values-grid,
.why-grid,
.features-grid{

grid-template-columns:repeat(2,1fr);

}

.tech-grid,
.industry-grid,
.story-wrapper{

grid-template-columns:repeat(2,1fr);

}

.process-timeline{

grid-template-columns:repeat(3,1fr);

}

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.hero-left h1{

font-size:44px;

}

.section-heading h2{

font-size:36px;

}

.hero-stats{

justify-content:center;

}

.services-grid,
.values-grid,
.story-wrapper,
.why-grid,
.features-grid,
.tech-grid,
.industry-grid,
.process-timeline,
.footer-grid{

grid-template-columns:1fr;

}

.vm-grid{

grid-template-columns:1fr;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.nav-links{

display:none;

}

.hero{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-right{

height:500px;

}

.ai-orb{

transform:scale(.75);

}

}

@media(max-width:500px){

.container{

width:94%;

}

.hero-left h1{

font-size:34px;

}

.cta-box{

padding:50px 25px;

}

.cynora-left h2{

font-size:48px;

}

.cynora-left h3{

font-size:28px;

}

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

.particle{

position:fixed;

bottom:-10px;

background:#ff003c;

border-radius:50%;

pointer-events:none;

box-shadow:0 0 15px #ff003c;

animation:particleUp linear forwards;

z-index:-1;

}

@keyframes particleUp{

0%{

transform:translateY(0) scale(0);

opacity:0;

}

20%{

opacity:1;

transform:scale(1);

}

100%{

transform:translateY(-120vh) scale(0);

opacity:0;

}

}