:root{
	--bg:#07111f;
	--text:#f7fbff;
	--muted:#a9b8ca;
	--accent:#39d9ff;
	--purple:#7c5cff;
	--line:rgba(255,255,255,.1);
	--shadow:0 24px 70px rgba(0,0,0,.3)}

*{
	box-sizing:border-box;
	margin:0;
	padding:0
}

html{
	scroll-behavior:smooth
}
body {
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, sans-serif;
    line-height: 1.6;
    background:
        linear-gradient(
            rgba(7, 17, 31, 0.35),
            rgba(7, 17, 31, 0.35)
        ), url("background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-left: 40px;
    padding-right: 40px;
}

a{
	color:inherit;
	text-decoration:none
}

button{
	font:inherit
}

.navbar{
	width:350px;
	margin:18px auto 0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:25px;
	position:right;
	top:15px;
	z-index:50;
	border:1px solid var(--line);
	border-radius:18px;
	background:rgba(7,17,31,.12);
	backdrop-filter:blur(8px);
	box-shadow:0 10px 35px rgba(0,0,0,.72)
}

.navbar2{
	width:min(550px,calc(100% - 40px));
	margin:18px auto 0;
	padding:14px 18px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:25px;
	position:sticky;
	top:15px;
	z-index:50;
	border:1px solid var(--line);
	border-radius:18px;
	background:rgba(7,17,31,.12);
	backdrop-filter:blur(8px);
	box-shadow:0 10px 35px rgba(0,0,0,.72)
}

.moreabout{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:20px;
	
}

.serv :hover{
	color: cyan;
}
	
	
.brand{
	display: flex;
	align-items: center;
	justify-content: center;
	font-family:'Space Grotesk';
	font-size:45px;
	font-weight:800;
	letter-spacing:.08em

}

.brand span{
	color:var(--accent)
}

.navbar nav{
	display:flex;
	gap:30px
}

.navbar nav a{
	color:var(--muted);
	font-size:.92rem
}

.navbar nav a:hover{
	color:#fff
}

.nav-call{
	padding:9px 16px;
	border-radius:10px;
	background:transparent;
	color:var(--accent);
	border:1px solid rgba(57,217,255,.25);
	font-weight:700;
	font-size:.9rem}

.hero{
	width:min(1180px,calc(100% - 40px));
	min-height:680px;
	margin:auto;
	display:grid;
	grid-template-columns:1.05fr .95fr;
	align-items:center;
	gap:50px;
	padding:90px 0 70px
}

.eyebrow{
	color:var(--accent);
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.18em;
	margin-bottom:16px
}

.hero h1,h2,h3{
	font-family:'Space Grotesk';
	line-height:1.05
}

.hero h1{
	font-size:clamp(3.3rem,7vw,6.6rem);
	letter-spacing:-.06em}
.hero h1 span{background:linear-gradient(90deg,var(--accent),#b0f4ff);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent}
.hero p{
max-width:620px;
	margin:26px 0;
	color:var(--muted);
	font-size:1.08rem}

.hero-actions{

	display:flex;
	flex-wrap:wrap;
	gap:12px}

.btn{

	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:13px 20px;
	border-radius:12px;
	font-weight:800;
	border:1px solid transparent;
	transition:.2s
}

.btn:hover{

	transform:translateY(-3px)
}

.primary{

	color:#04111b;
	background:var(--accent);
	box-shadow:0 10px 30px rgba(57,217,255,.18)
}

.secondary{

	border-color:var(--line);
	background:rgba(255,255,255,.04)}
.large{
padding:16px 24px}

.trust-row{
display:flex;
	flex-wrap:wrap;
	gap:18px;
	margin-top:25px;
	color:#c8d4e2;
	font-size:.8rem}

.hero-visual{
	position:relative;
	min-height:480px;
	display:grid;
	place-items:center
}

.glow{
position:absolute;
	width:340px;
	height:340px;
	border-radius:50%;
	background:var(--accent);
	filter:blur(100px);
	opacity:.13}



.service-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px}

.service-card{
	overflow:hidden;
	border:1px solid var(--line);
	border-radius:20px;
	background:rgba(0,0,123,.5);
	transition:.3s
}

.service-card:hover{
	transform:translateY(-8px);	
	border-color:rgba(57,217,255,.35);
	box-shadow:var(--shadow)}

.service-image{
	height:190px;
	display:flex;
	justify-content: center;
	align-items: center;
	place-items:center;
	font-size:4.5rem;
}


.service-content{
	padding:24px}

.tag{
	color:transparent;
	font-size:.68rem;
	font-weight:800;
	letter-spacing:.15em}

.service-content h3{
	font-size:1.35rem;
	margin:9px 0}

.service-content p{
	color:var(--muted);
	font-size:.9rem;
	min-height:72px}

.aboutservice{
	display: flex;
	align-content: right;
	justify-content: right;
	color: var(--accent);
}
.aboutservice:hover{
	color: pink;
}

.explanation{
    width: 100%;
    margin-top: 30px;
    background: transparent;
    border-radius: 20px;
    color: white;
    padding: 20px;
}

.topic{
	font-size: 300%;
	background: url(windows.jpg);
	background-size: 200% auto;
	background-clip: text;
	color: transparent;
	animation: pan 30s linear infinite alternate;

}

@keyframes pan{
	from{ background-position: 0% center;}
	to {background-position: 100% center;}
}

.list{
	padding-left: 10%;
}

.laptop, .window, .m365, .problem, .performance, .software {
    width: 100%;
	/*background: rgba(50,100,255,.3);*/
	padding: 24px;
	border-radius: 20px;
	margin: 0 0 15px;
}
.laptop p, .window p, .m365 p, .problem p, .performance p, .software p { color: var(--muted); font-size: 1rem; line-height: 1.7; }

.about { width:min(1180px,calc(100% - 40px)); margin:70px auto 0; padding:50px 0; }
.about .section-heading { margin-bottom:30px; }
.about-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.about-card { padding:24px; border:1px solid var(--line); border-radius:20px; background:rgba(0,0,123,.5); }
.about-card h3 { font-size:1.2rem; margin-bottom:10px; }
.about-card p { color:var(--muted); font-size:.9rem; line-height:1.6; }

.cta{
	width:min(1180px,calc(100% - 40px));
	margin:0 auto 80px;
	padding:50px;
	border-radius:24px;
	background:linear-gradient(100deg,rgba(57,217,255,.13),rgba(124,92,255,.14));
	border:1px solid var(--line);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	margin-top: 40px;
	margin-top: 40px;
}

.cta p{
	color:var(--muted);
	margin-top: 10px;
}
footer{
	width:min(1180px,calc(100% - 40px));
	margin:auto;
	padding:25px 0 35px;
	border-top:1px solid var(--line);
	color:#718198;
	display:flex;	
	justify-content:space-between;
	font-size:.75rem}


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

/* Large screens */
@media (min-width: 1400px) {
    .hero,
    .cta,
    footer {
        max-width: 1300px;
    }

    .hero {
        min-height: 720px;
    }
}


/* =========================================================
   TABLETS / SMALL LAPTOPS
   ========================================================= */
@media (max-width: 1024px) {

    body {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Navigation */
    .navbar {
        width: min(350px, 100%);
    }

    .navbar2 {
        width: min(700px, 100%);
    }

    .moreabout {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .navbar nav {
        gap: 18px;
    }

    /* Hero */
    .hero {
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 70px 0 60px;
        min-height: 600px;
    }

    .hero h1 {
        font-size: clamp(3rem, 7vw, 5rem);
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-visual {
        min-height: 400px;
    }

    /* Services */
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .service-image {
        height: 180px;
    }

    /* Explanation sections */
    .explanation {
        width: 100%;
        min-width: 0;
    }

    .topic {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .laptop,
    .window,
    .m365,
    .problem,
    .performance,
    .software {
        min-width: 0;
        width: 100%;
    }

    .about { width:100%; }
    .about-grid { grid-template-columns:repeat(2,1fr); }

    /* CTA */
    .cta {
        width: 100%;
        padding: 40px;
    }

    /* Footer */
    footer {
        width: 100%;
    }
}


/* =========================================================
   TABLETS / LARGE PHONES
   ========================================================= */
@media (max-width: 768px) {

    body {
        padding-left: 15px;
        padding-right: 15px;
        background-attachment: scroll;
    }

    /* Navigation */
    .navbar {
        width: 100%;
        max-width: 420px;
        margin-top: 12px;
    }

    .navbar2 {
        width: 100%;
        max-width: 600px;
        padding: 12px 14px;
        gap: 12px;
    }

    .navbar nav {
        width: 100%;
    }

    .moreabout {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .navbar2 .nav-call {
        padding: 8px 12px;
        font-size: .8rem;
        white-space: nowrap;
    }

    .brand {
        font-size: 38px;
    }

    /* Hero */
    .hero {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 60px 0 50px;
        text-align: center;
    }

    .hero-copy {
        width: 100%;
    }

    .hero p {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .trust-row {
        justify-content: center;
    }

    .hero-visual {
        min-height: 280px;
    }

    /* Services */
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .service-image {
        height: 170px;
    }

    .service-content {
        padding: 20px;
    }

    .service-content p {
        min-height: auto;
    }

    /* Explanation */
    .explanation { padding:10px 5px; margin-top:0; }

    .topic {
        font-size: clamp(2rem, 8vw, 3.5rem);
        line-height: 1;
    }

    .laptop,
    .window,
    .m365,
    .problem,
    .performance,
    .software {
        font-size: clamp(20px, 5vw, 32px);
        padding: 20px;
    }

    /* CTA */
    .cta {
        width: 100%;
        padding: 35px 25px;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* Footer */
    footer {
        width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }
}


/* =========================================================
   PHONES
   ========================================================= */
@media (max-width: 600px) {

    body {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Navigation */
    .navbar {
        width: 100%;
        border-radius: 14px;
    }

    .navbar2 { width:100%; display:grid; grid-template-columns:1fr; justify-items:center; gap:10px; border-radius:14px; }

    .navbar2 nav {
        width: 100%;
    }

    .moreabout {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        text-align: center;
    }

    .serv {
        font-size: .82rem;
    }

    .navbar2 .nav-call { display:inline-flex; align-items:center; justify-content:center; min-width:90px; padding:7px 12px; font-size:.78rem; }

    .brand {
		display: flex;
		align-items: center;
		justify-content: center;
        font-size: 32px;
    }

    /* Hero */
    .hero {
        padding: 45px 0 40px;
    }

    .eyebrow {
        font-size: .62rem;
        letter-spacing: .12em;
    }

    .hero h1 {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }

    .hero p {
        font-size: .95rem;
        line-height: 1.6;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .trust-row {
        gap: 8px;
        font-size: .7rem;
    }

    /* Services */
    .service-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .service-image {
        height: 200px;
    }

    .service-content {
        padding: 20px;
    }

    .service-content h3 {
        font-size: 1.25rem;
    }

    .service-content p {
        font-size: .88rem;
    }

    /* Explanation */
    .topic {
        font-size: clamp(1.8rem, 10vw, 3rem);
    }

    .explanation { padding:10px 5px; margin-top:0; }
    .laptop, .window, .m365, .problem, .performance, .software { width:100%; min-width:0; padding:18px; }
    .laptop p, .window p, .m365 p, .problem p, .performance p, .software p { font-size:.9rem; line-height:1.65; }
    .about { padding:35px 0; margin-top:30px; }
    .about-grid { grid-template-columns:1fr; gap:15px; }
    .about-card { padding:20px; }
    .about-card p { font-size:.88rem; }

    /* CTA */
    .cta {
        padding: 30px 18px;
        border-radius: 18px;
    }

    .cta h2 {
        font-size: 1.7rem;
    }

    /* Footer */
    footer {
        font-size: .7rem;
        padding-bottom: 25px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */
@media (max-width: 400px) {

    .brand {
        font-size: 27px;
    }

    .moreabout {
        gap: 5px;
    }

    .serv {
        font-size: .72rem;
    }

    .navbar2 .nav-call {
        padding: 6px 9px;
        font-size: .7rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: .9rem;
    }

    .service-image {
        height: 170px;
    }

    .topic {
        font-size: 1.7rem;
    }

    .cta h2 {
        font-size: 1.5rem;
    }
}


/* =========================================================
   ACCESSIBILITY / TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .btn:hover,
    .service-card:hover {
        transform: none;
    }

    .btn {
        min-height: 46px;
    }

    .nav-call {
        min-height: 42px;
    }
}