@font-face {

font-family: "Inter";

src: url("../fonts/Inter-Regular.woff2") format("woff2");

font-weight:400;

font-style:normal;

font-display:swap;

}


@font-face {

font-family: "Inter";

src: url("../fonts/Inter-Medium.woff2") format("woff2");

font-weight:500;

font-style:normal;

font-display:swap;

}


@font-face {

font-family: "Inter";

src: url("../fonts/Inter-SemiBold.woff2") format("woff2");

font-weight:600;

font-style:normal;

font-display:swap;

}


@font-face {

font-family: "Inter";

src: url("../fonts/Inter-Bold.woff2") format("woff2");

font-weight:700;

font-style:normal;

font-display:swap;

}





:root {


--background:#142c50;

--background-dark:#0b1d36;

--primary:#63c7ff;

--primary-light:#8be1ff;

--text:#ffffff;

--text-muted:rgba(255,255,255,.72);

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

--border:rgba(255,255,255,.12);

--shadow:
0 30px 80px rgba(0,0,0,.25);


--radius:28px;


}





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


* {

margin:0;

padding:0;

box-sizing:border-box;

}


html {

scroll-behavior:smooth;

}


body {


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


background:

linear-gradient(
135deg,
var(--background),
var(--background-dark)
);


color:var(--text);


overflow-x:hidden;


line-height:1.6;


}





img {

max-width:100%;

display:block;

}



a {

color:inherit;

text-decoration:none;

}



button,
input,
textarea {

font-family:inherit;

}





/* =====================
   GLOBAL
===================== */


.container {


width:min(1200px,90%);

margin:auto;


}



.section {


padding:140px 0;


}




.section-heading {


max-width:850px;

margin:
0 auto 80px;

text-align:center;


}



.section-heading .eyebrow {


margin-bottom:20px;


}





.eyebrow {


font-size:13px;

letter-spacing:3px;

font-weight:700;


color:var(--primary);


text-transform:uppercase;


}




.section-heading h2 {


font-size:clamp(38px,5vw,58px);


line-height:1.1;


margin-bottom:25px;


font-weight:800;


}




.section-heading h2 span {


color:var(--primary);


}



.section-heading p:last-child {


color:var(--text-muted);


font-size:18px;


}





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


.background {


position:fixed;

inset:0;

pointer-events:none;

z-index:-1;

overflow:hidden;


}



.grid-background {


position:absolute;

inset:0;


background-image:

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

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


background-size:

60px 60px;


mask-image:
radial-gradient(
circle,
black,
transparent 80%
);


}




.glow {


position:absolute;


border-radius:50%;


filter:blur(120px);


opacity:.35;


}




.glow-one {


width:500px;

height:500px;


background:#55c9ff;


top:-150px;

left:-100px;


animation:
moveGlow 15s infinite alternate;


}



.glow-two {


width:600px;

height:600px;


background:#477dff;


right:-200px;

bottom:-200px;


animation:
moveGlow 18s infinite alternate-reverse;


}



@keyframes moveGlow {


from {

transform:translate(0,0);

}


to {

transform:translate(80px,50px);

}


}






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


.header {


position:fixed;

top:0;

left:0;

right:0;


z-index:100;


background:

rgba(10,25,45,.45);


backdrop-filter:

blur(20px);


border-bottom:

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


}





.navigation {


height:90px;


display:flex;


align-items:center;


justify-content:space-between;


}





.brand {


display:flex;

align-items:center;

gap:16px;


}



.logo {



height:52px;


object-fit:contain;


padding:7px;



}





.brand-text strong {


display:block;


font-size:22px;


line-height:1;


}



.brand-text strong span {


color:var(--primary);


}



.brand-text small {


color:var(--text-muted);


font-size:12px;


}





.nav-links {


display:flex;

gap:35px;

list-style:none;


}



.nav-links a {


font-size:15px;


color:rgba(255,255,255,.8);


transition:.3s;


}



.nav-links a:hover {


color:var(--primary);


}



.nav-button {


padding:14px 26px;


border-radius:100px;


background:

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


border:

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


transition:.3s;


}


.nav-button:hover {


background:var(--primary);


color:#123;


}

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


.hero {


min-height:100vh;


display:flex;


align-items:center;


padding-top:100px;


}




.hero-container {


display:grid;


grid-template-columns:

1fr 1fr;


gap:80px;


align-items:center;


}




.hero-content {


position:relative;


}




.hero-content h1 {


font-size:

clamp(48px,6vw,78px);


line-height:

1.05;


font-weight:800;


letter-spacing:-2px;


margin-bottom:30px;


}



.hero-content h1 span {


display:inline;


color:var(--primary);


background:

linear-gradient(
90deg,
#63c7ff,
#9ce8ff
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}





.hero-text {


font-size:20px;


max-width:650px;


color:var(--text-muted);


margin-bottom:45px;


line-height:1.8;


}




.hero-actions {


display:flex;


gap:20px;


flex-wrap:wrap;


}




.button {


display:inline-flex;


align-items:center;


justify-content:center;


padding:18px 35px;


border-radius:100px;


font-weight:700;


font-size:16px;


border:none;


cursor:pointer;


transition:

transform .3s ease,

box-shadow .3s ease;


}





.button:hover {


transform:translateY(-4px);


}




.primary {


background:

linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);


color:#102746;


box-shadow:

0 15px 40px rgba(99,199,255,.25);


}



.primary:hover {


box-shadow:

0 20px 60px rgba(99,199,255,.45);


}




.secondary {


border:

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


background:

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


color:white;


}




.secondary:hover {


background:

rgba(255,255,255,.12);


}





.hero-meta {


display:flex;


gap:30px;


margin-top:55px;


flex-wrap:wrap;


}




.hero-meta div {


color:rgba(255,255,255,.75);


font-size:14px;


}



.hero-meta strong {


color:var(--primary);


margin-right:8px;


}





/* =====================
   HERO DEVICE VISUAL
===================== */


.hero-visual{

position:relative;

height:650px;

display:flex;

align-items:center;

justify-content:center;

}





.visual-glow{

position:absolute;

width:450px;

height:450px;

background:

radial-gradient(

circle,

rgba(99,199,255,.35),

transparent 70%

);


filter:blur(30px);


}





/* LAPTOP */


.laptop{


position:absolute;


width:560px;


z-index:2;


transform:

perspective(1200px)

rotateY(-12deg)

rotateX(5deg);


animation:

deviceFloat 7s ease-in-out infinite;


}





.laptop-top{


height:18px;


background:

linear-gradient(

90deg,

#333,

#111

);


border-radius:

18px 18px 0 0;


position:relative;


}




.camera{


position:absolute;


width:7px;

height:7px;


background:#555;


border-radius:50%;


left:50%;


top:5px;


}





.screen{


height:360px;


background:

linear-gradient(

145deg,

#182b48,

#081425

);


border:

3px solid #333;


border-radius:

12px;


padding:35px;


box-shadow:

0 30px 80px rgba(0,0,0,.5);


}





.screen-header{


display:flex;

gap:7px;

margin-bottom:40px;


}



.screen-header span{


width:10px;

height:10px;


border-radius:50%;


background:

rgba(255,255,255,.4);


}





.screen-brand{


font-size:18px;


font-weight:700;


}



.screen-brand span{


color:

var(--primary);


}




.screen-content h3{


font-size:42px;


margin:

45px 0 15px;


}



.screen-content p{


color:

rgba(255,255,255,.65);


}




.screen-buttons{


display:flex;


gap:15px;


margin-top:35px;


}



.screen-buttons div{


height:12px;


width:120px;


background:

rgba(99,199,255,.6);


border-radius:20px;


}



.screen-buttons div:last-child{


width:70px;


background:

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


}





.laptop-base{


height:25px;


width:620px;


margin-left:-30px;


background:

linear-gradient(

180deg,

#333,

#111

);


border-radius:

0 0 25px 25px;


}






/* PHONE */


.phone{


position:absolute;


right:40px;


bottom:45px;


width:190px;


height:380px;


background:

#111;


border-radius:35px;


padding:12px;


z-index:4;


box-shadow:

0 40px 80px rgba(0,0,0,.45);


transform:

rotate(8deg);


animation:

phoneFloat 6s ease-in-out infinite;


}




.phone-screen{


height:100%;


border-radius:25px;


background:

linear-gradient(

160deg,

#23497d,

#10223d

);


padding:35px 20px;


text-align:center;


}




.phone-speaker{


position:absolute;


top:15px;


left:50%;


transform:translateX(-50%);


width:50px;


height:6px;


background:#333;


border-radius:20px;


}





.app-logo{


width:55px;


height:55px;


margin:

20px auto;


display:flex;


align-items:center;


justify-content:center;


border-radius:18px;


background:

linear-gradient(

135deg,

var(--primary),

var(--primary-light)

);


color:#123;


font-weight:900;


}





.phone-screen h4{


margin-bottom:25px;


}




.app-card{


padding:18px;


margin-top:15px;


border-radius:15px;


background:

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


}





/* TAGS */


.floating-tag{


position:absolute;


padding:

12px 22px;


border-radius:50px;


background:

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


border:

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


backdrop-filter:

blur(15px);


font-size:13px;


font-weight:700;


letter-spacing:1px;


color:

var(--primary);


z-index:5;


}




.tag-one{


top:110px;

left:40px;


animation:

tagFloat 5s infinite;


}



.tag-two{


right:10px;

top:150px;


animation:

tagFloat 6s infinite reverse;


}



.tag-three{


bottom:80px;

left:20px;


animation:

tagFloat 7s infinite;


}





@keyframes deviceFloat{


0%,100%{

transform:

perspective(1200px)

rotateY(-12deg)

translateY(0);

}


50%{

transform:

perspective(1200px)

rotateY(-12deg)

translateY(-20px);

}


}



@keyframes phoneFloat{


50%{

transform:

rotate(8deg)

translateY(-15px);

}


}



@keyframes tagFloat{


50%{

transform:

translateY(-15px);

}


}





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


.about-grid {


display:grid;


grid-template-columns:

1fr 1fr;


gap:40px;


}



.about-card {


padding:45px;


border-radius:var(--radius);


background:

var(--glass);


border:

1px solid var(--border);


backdrop-filter:

blur(20px);


}



.about-card h3 {


font-size:32px;


margin-bottom:25px;


}



.about-card p {


color:var(--text-muted);


margin-bottom:20px;


line-height:1.8;


}



.about-card.highlight {


display:flex;


flex-direction:column;


gap:25px;


}





.mini-item {


display:flex;


gap:25px;


align-items:flex-start;


}



.mini-icon {


width:55px;

height:55px;


display:flex;


align-items:center;


justify-content:center;


border-radius:16px;


background:

linear-gradient(
135deg,
var(--primary),
var(--primary-light)
);


color:#102746;


font-weight:800;


}



.mini-item h4 {


font-size:20px;


margin-bottom:5px;


}



.mini-item p {


font-size:15px;


margin:0;


}




/* =====================
 SERVICES
===================== */


.services-grid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}



.service-card {


padding:40px;


background:

rgba(255,255,255,.07);


border:

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


border-radius:

28px;


transition:

.35s;


}



.service-card:hover {


transform:

translateY(-12px);


background:

rgba(255,255,255,.12);


border-color:

rgba(99,199,255,.3);


}



.service-icon {


display:inline-flex;


padding:10px 18px;


border-radius:100px;


background:

rgba(99,199,255,.12);


color:

var(--primary);


font-size:13px;


font-weight:700;


letter-spacing:1px;


margin-bottom:25px;


}



.service-card h3 {


font-size:28px;


margin-bottom:15px;


}



.service-card p {


color:

var(--text-muted);


line-height:1.8;


}

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


.workflow {


position:relative;


display:grid;


gap:30px;


max-width:900px;


margin:auto;


}



.workflow::before {


content:"";


position:absolute;


left:28px;


top:40px;


bottom:40px;


width:1px;


background:

linear-gradient(

to bottom,

transparent,

rgba(99,199,255,.6),

transparent

);


}




.workflow-item {


display:flex;


gap:35px;


align-items:flex-start;


padding:30px;


border-radius:25px;


background:

rgba(255,255,255,.06);


border:

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


backdrop-filter:

blur(15px);


transition:.3s;


}



.workflow-item:hover {


transform:translateX(10px);


background:

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


}




.workflow-item span {


min-width:58px;


height:58px;


display:flex;


align-items:center;


justify-content:center;


border-radius:18px;


background:

linear-gradient(

135deg,

var(--primary),

var(--primary-light)

);


color:#102746;


font-weight:800;


z-index:1;


}



.workflow-item h3 {


font-size:24px;


margin-bottom:8px;


}



.workflow-item p {


color:

var(--text-muted);


}





/* =====================
 PROJECTS
===================== */


.projects-grid {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:30px;


}



.project-card {


overflow:hidden;


border-radius:28px;


background:

rgba(255,255,255,.07);


border:

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


transition:.4s;


}



.project-card:hover {


transform:

translateY(-12px);


box-shadow:

0 25px 70px rgba(0,0,0,.3);


}




.project-image {


height:280px;


display:flex;


align-items:center;


justify-content:center;


font-size:28px;


font-weight:700;


color:

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


background:


linear-gradient(

135deg,

rgba(99,199,255,.15),

rgba(255,255,255,.03)

);


}





.project-content {


padding:30px;


}



.project-content h3 {


font-size:25px;


margin-bottom:12px;


}



.project-content p {


color:

var(--text-muted);


line-height:1.7;


}






/* =====================
 BENEFITS
===================== */


.benefits-grid {


display:grid;


grid-template-columns:

repeat(2,1fr);


gap:30px;


}



.benefit-card {


padding:40px;


border-radius:28px;


background:

rgba(255,255,255,.07);


border:

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


transition:.3s;


}



.benefit-card:hover {


background:

rgba(255,255,255,.11);


}



.benefit-number {


font-size:42px;


font-weight:800;


color:

var(--primary);


margin-bottom:20px;


}



.benefit-card h3 {


font-size:27px;


margin-bottom:15px;


}



.benefit-card p {


color:

var(--text-muted);


line-height:1.8;


}





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


.cta-box {


text-align:center;


padding:

100px 60px;


border-radius:

40px;


background:


linear-gradient(

135deg,

rgba(99,199,255,.18),

rgba(255,255,255,.06)

);


border:

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


backdrop-filter:

blur(25px);


box-shadow:

var(--shadow);


}




.cta-box h2 {


font-size:

clamp(40px,5vw,65px);


line-height:1.1;


margin:

20px auto;


max-width:900px;


}



.cta-box p:not(.eyebrow) {


max-width:700px;


margin:

0 auto 45px;


font-size:19px;


color:

var(--text-muted);


}




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


.contact-grid {


display:grid;


grid-template-columns:

.8fr 1.2fr;


gap:40px;


}



.contact-info {


padding:45px;


border-radius:30px;


background:

rgba(255,255,255,.07);


border:

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


}




.contact-info h3 {


font-size:32px;


margin-bottom:20px;


}



.contact-info p {


color:

var(--text-muted);


margin-bottom:35px;


}



.contact-item {


padding:20px 0;


border-bottom:

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


display:flex;


flex-direction:column;


gap:5px;


}



.contact-item strong {


color:

var(--primary);


}





.contact-form {


padding:45px;


border-radius:30px;


background:

rgba(255,255,255,.07);


border:

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


display:flex;


flex-direction:column;


gap:20px;


}



.contact-form input,
.contact-form textarea {


width:100%;


padding:18px 22px;


border-radius:18px;


border:

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


background:

rgba(255,255,255,.06);


color:white;


font-size:16px;


outline:none;


transition:.3s;


}



.contact-form textarea {


height:180px;


resize:none;


}



.contact-form input::placeholder,
.contact-form textarea::placeholder {


color:

rgba(255,255,255,.5);


}




.contact-form input:focus,
.contact-form textarea:focus {


border-color:

var(--primary);


background:

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


}

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


.footer {


padding:

90px 0 35px;


border-top:

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


background:

rgba(0,0,0,.15);


}




.footer-container {


display:grid;


grid-template-columns:

2fr 1fr 1fr 1fr;


gap:50px;


}




.footer-brand img {


width:80%;


margin-bottom:20px;


}



.footer-brand h3 {


font-size:28px;


margin-bottom:15px;


}



.footer-brand h3 span {


color:

var(--primary);


}



.footer-brand p {


color:

var(--text-muted);


max-width:320px;


}





.footer-column {


display:flex;


flex-direction:column;


gap:14px;


}



.footer-column h4 {


font-size:18px;


margin-bottom:15px;


}



.footer-column a {


color:

rgba(255,255,255,.7);


transition:.3s;


}



.footer-column a:hover {


color:

var(--primary);


transform:

translateX(5px);


}





.footer-bottom {


margin-top:70px;


padding-top:30px;


border-top:

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


text-align:center;


color:

rgba(255,255,255,.5);


font-size:14px;


}





/* =====================
   SCROLL ANIMATION
===================== */


.reveal {


opacity:0;


transform:

translateY(40px);


transition:

all .8s ease;


}



.reveal.active {


opacity:1;


transform:

translateY(0);


}





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


@media(max-width:1100px){



.hero-container {


grid-template-columns:1fr;


}



.hero-content {


text-align:center;


}



.hero-text {


margin-left:auto;

margin-right:auto;


}



.hero-actions {


justify-content:center;


}



.hero-meta {


justify-content:center;


}



.hero-visual {


max-width:650px;


margin:auto;


}



.about-grid {


grid-template-columns:1fr;


}



.services-grid {


grid-template-columns:

repeat(2,1fr);


}



.projects-grid {


grid-template-columns:

repeat(2,1fr);


}



.contact-grid {


grid-template-columns:1fr;


}



.footer-container {


grid-template-columns:

repeat(2,1fr);


}



}





@media(max-width:850px){



.nav-links {


display:none;


}



.nav-button {


display:none;


}



.navigation {


height:75px;


}



.hero {


padding-top:120px;


}



.workflow::before {


display:none;


}



.workflow-item {


gap:20px;


}



.benefits-grid {


grid-template-columns:1fr;


}



.cta-box {


padding:

70px 30px;


}



}




@media(max-width:650px){



.container {


width:

92%;


}



.section {


padding:

90px 0;


}



.hero-content h1 {


font-size:

42px;


letter-spacing:-1px;


}



.hero-text {


font-size:17px;


}



.hero-actions {


flex-direction:column;


}



.button {


width:100%;


}



.browser-window {


transform:none;


}



.browser-window:hover {


transform:none;


}



.services-grid {


grid-template-columns:1fr;


}



.projects-grid {


grid-template-columns:1fr;


}



.footer-container {


grid-template-columns:1fr;


text-align:center;


}



.footer-brand p {


margin:auto;


}



.footer-column {


align-items:center;


}



.contact-form,
.contact-info {


padding:30px;


}



.cta-box h2 {


font-size:36px;


}



}





/* =====================
   SMALL POLISH
===================== */


::selection {


background:

var(--primary);


color:#102746;


}




::-webkit-scrollbar {


width:10px;


}



::-webkit-scrollbar-track {


background:#0c203d;


}



::-webkit-scrollbar-thumb {


background:

linear-gradient(

var(--primary),

#3c8fff

);


border-radius:10px;


}





/* Button Shine Effect */


.primary {


position:relative;


overflow:hidden;


}




.primary::after {


content:"";


position:absolute;


top:0;


left:-120%;


width:80%;


height:100%;


background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.45),

transparent

);


transition:.7s;


}



.primary:hover::after {


left:140%;


}

.cursor-glow{

position:fixed;

width:350px;

height:350px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(99,199,255,.15),

transparent 65%

);

pointer-events:none;

transform:

translate(-50%,-50%);

z-index:0;

transition:

opacity .3s;

}


/* =====================
   LEGAL PAGES
===================== */


.legal-page {

min-height:100vh;

padding-top:180px;

padding-bottom:100px;

}



.legal-box {

max-width:850px;

margin:auto;

padding:60px;


background:

rgba(255,255,255,.07);


border:

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


border-radius:35px;


backdrop-filter:

blur(25px);


}



.legal-box h1 {

font-size:

clamp(42px,5vw,64px);


margin:

20px 0 35px;


}



.legal-placeholder {

color:

var(--text-muted);


font-size:18px;


line-height:1.9;


}