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

html {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge/IE */
  overflow-x: hidden;
}

html::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, new Edge */
}

body{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    min-height: 100vh;         /* was height: 100vh — that hard-capped the page */
    background-color: #15062c;
    position: relative;
    overflow-x: hidden;
    /* removed overflow-y: hidden — this was blocking scroll and hiding content
       taller than one screen, which is most of this page on mobile */
    display:flex;
    flex-direction:column;
}

/* NAVBAR */

.navbar {
    width:100%;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items:center;
    gap: 1rem 2rem;
    padding: 16px 5%;
}

.logo-area {
    display:flex;
    align-items:center;
    gap: 1rem;
    min-width: 0; /* lets it shrink instead of forcing overflow next to nav */
}

.logo-area img {
    width: clamp(70px, 10vw, 150px);
    filter: drop-shadow(0 0 2px rgb(239, 118, 255));
}

.logo-area h1 {
    font-size: clamp(1.3rem, 3vw, 2.5rem);
    font-weight: 400;
    color:#e8ddff;
    letter-spacing: 0.1rem;
}

.logo-area p {
    font-size: clamp(0.85rem, 1.6vw, 1.5rem);
    color:#8a8a8a;
}

nav {
    display:flex;
    align-items:center;
}

nav ul {
    display:flex;
    align-items:center;
    gap: 1rem;
    list-style: none;
}

nav a {
    color:rgb(251, 238, 255);
    text-decoration:none;
    letter-spacing: 0.15rem;
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    font-weight: bold;
    padding: 8px 16px;
    transition: 0.3s ease;
    border:1px solid rgba(170,80,255,0.4);
    border-radius:20px;
    background: rgba(20, 10, 40, 0.6);
    box-shadow: 0 0 12px rgba(150, 90, 255, 0.35);
    white-space: nowrap;
}

nav a:hover {
    color: #fdfdfd;
    box-shadow:0 0 30px rgba(170,80,255,.4);
    transform:translateY(-4px);
}

/* SERVICES */

.services {
    text-align:center;
    padding: clamp(30px, 5vw, 60px) 5% 60px;
    color:#e8ddff;
}

.services h2 {
    font-size: clamp(1.8rem, 5vw, 48px);
    margin-bottom:15px;
}

.intro {
    width: 90%;
    max-width: 600px;
    margin:auto;
    line-height:1.7;
    color:#aaa;
}

.service-container {
    margin-top: clamp(24px, 4vw, 48px);
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 320px;
    max-width:420px;
    min-height:260px;
    border:1px solid rgba(170,80,255,0.4);
    border-radius:20px;
    padding: clamp(24px, 4vw, 40px);
    background:rgba(255,255,255,0.02);
    transition:.3s;
}

.card:hover {
    transform:translateY(-10px);
    box-shadow:0 0 30px rgba(170,80,255,.4);
}

.card h3 {
    font-size:24px;
    margin-bottom:15px;
}

.card p {
    color:#e8ddff;
    line-height:1.7;
}

body {
    opacity: 0;
    animation: pageFadeIn 0.8s ease forwards;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.fade-out {
    animation: pageFadeOut 0.5s ease forwards;
}

@keyframes pageFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Moving grid overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(0, 170, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 170, 255, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: moveGrid 10s linear infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes moveGrid {
    from { transform: translate(0, 0); }
    to { transform: translate(-50px, -50px); }
}

.service-icon{
    height:160px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:20px;
}

/* Window */

.mini-editor{
    width: min(230px, 100%);
    height:150px;
    background:#0b1120;
    border:1px solid rgba(90,130,255,.4);
    border-radius:12px;
    overflow:hidden;
    box-shadow:
        0 0 25px rgba(66,133,255,.25),
        inset 0 0 15px rgba(66,133,255,.08);
    transition:.35s;
}

.service-card:hover .mini-editor{
    transform:translateY(-4px) scale(1.03);
    box-shadow:
        0 0 40px rgba(255,141,12,.35),
        0 0 20px rgba(66,133,255,.4);
}

/* Top Bar */

.editor-top{
    height:30px;
    background:#141d32;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
}

.red{background:#ff605c;}
.yellow{background:#ffbd44;}
.green{background:#00ca4e;}

.filename{
    margin-left:12px;
    color:#8fa8ff;
    font-size:12px;
    font-family:Arial;
}

/* Code */

.editor-body{
    padding:14px;
    font-family:Consolas, monospace;
    font-size:13px;
    line-height:1.8;
}

.code-row{
    opacity:0;
    animation:appear .5s forwards;
    width:100%;
    text-align:left;
}

.delay1{animation-delay:.4s;}
.delay2{animation-delay:.8s;}
.delay3{animation-delay:1.2s;}
.delay4{animation-delay:1.6s;}

.indent{
    padding-left:18px;
}

/* Syntax */

.kw{ color:#b57cff; }
.var{ color:#69d8ff; }
.func{ color:#ffb14d; }
.str{ color:#79ff9d; }

/* Cursor */

.cursor{
    display:inline-block;
    width:2px;
    height:15px;
    background:white;
    vertical-align:middle;
    margin-left:3px;
    animation:blink .8s infinite;
}

/* Animations */

@keyframes appear{
    from{ opacity:0; transform:translateX(-8px); }
    to{ opacity:1; transform:translateX(0); }
}

@keyframes blink{
    50%{ opacity:0; }
}

.hdd-icon {
    width: min(230px, 100%);
    height:150px;
    overflow:hidden;
    filter: drop-shadow(0 0 12px rgba(66,133,255,.2));
    transition:.35s;
}

.service-card:hover .hdd-icon {
    transform:translateY(-4px) scale(1.03);
    filter: drop-shadow(0 0 20px rgba(255,141,12,.35))
            drop-shadow(0 0 12px rgba(66,133,255,.4));
}

.hdd-svg {
    width:100%;
    height:100%;
    overflow:visible;
}

.hdd-screw {
    fill:#1a2540;
    stroke:rgba(255,255,255,.15);
    stroke-width:0.75;
}

.hdd-platter-group {
    transform-origin: 90px 75px;
    animation: hddSpin 2.2s linear infinite;
}

@keyframes hddSpin {
    from { transform:rotate(0deg); }
    to   { transform:rotate(360deg); }
}

.hdd-sectors {
    animation: sectorShimmer 2.2s linear infinite;
}

@keyframes sectorShimmer {
    0%, 100% { opacity:.6; }
    50%      { opacity:1; }
}

.hdd-hub-glow {
    animation: hubPulse 2s ease-in-out infinite;
}

@keyframes hubPulse {
    0%, 100% { filter:drop-shadow(0 0 2px #57b8ff); }
    50%      { filter:drop-shadow(0 0 8px #57b8ff); }
}

.hdd-arm-group {
    transform-origin: 145px 35px;
    animation: armSeek 1.6s ease-in-out infinite;
}

@keyframes armSeek {
    0%, 100% { transform:rotate(0deg); }
    30%      { transform:rotate(10deg); }
    60%      { transform:rotate(-4deg); }
    80%      { transform:rotate(6deg); }
}

.hdd-arm-glow {
    filter: drop-shadow(0 0 4px rgba(255,141,12,.8));
}

.hdd-led {
    fill:#00ff88;
    animation: pulse 2s infinite;
}

.hdd-label {
    fill:#cfd8ff;
    font-size:9px;
    font-family:Consolas, monospace;
}

.hdd-capacity {
    fill:#57b8ff;
    font-size:9px;
    font-family:Consolas, monospace;
}

.hdd-pins rect {
    animation: pinFlicker 1.4s ease-in-out infinite;
}

.hdd-pins rect:nth-child(2n) {
    animation-delay: .3s;
}

.hdd-pins rect:nth-child(3n) {
    animation-delay: .6s;
}

@keyframes pinFlicker {
    0%, 100% { opacity:.4; }
    50%      { opacity:1; }
}

@keyframes pulse{
    0%,100%{ opacity:.4; box-shadow:0 0 4px currentColor; }
    50%{ opacity:1; box-shadow:0 0 10px currentColor; }
}

.consulting-animation {
    height:180px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.holo-dashboard {
    position:relative;
    width: min(230px, 100%);
    height:150px;
    padding:15px;
    border:1px solid rgba(90,130,255,.4);
    border-radius:12px;
    background: #0b1120;
    color:#d6e6ff;
    font-family:monospace;
    box-shadow:
        0 0 25px rgba(66,133,255,.25),
        inset 0 0 15px rgba(66,133,255,.08);
    overflow:hidden;
}

.scan-line {
    position:absolute;
    left: 0;
    width:100%;
    height:2px;
    background:#8eeaff;
    top:0;
    box-shadow:
        0 0 5px #00aaff,
        0 0 15px #00aaff,
        0 0 30px #00aaff;
    animation:scan 3s infinite linear;
}

@keyframes scan {
    from { top:0; }
    to { top:90%; }
}

.stats p {
    display:flex;
    justify-content:space-between;
    margin:8px 0;
}

.stats span {
    color:#00aaff;
}

.chart {
    display:flex;
    align-items:end;
    gap:5px;
    height:35px;
}

.chart div {
    width:12px;
    background:#00aaff;
    animation: grow 1.5s infinite alternate;
}

.chart div:nth-child(1){ height:15px; }
.chart div:nth-child(2){ height:30px; }
.chart div:nth-child(3){ height:22px; }
.chart div:nth-child(4){ height:40px; }

@keyframes grow {
    from { transform:scaleY(.6); }
    to { transform:scaleY(1); }
}

.keyword { color:#c586ff; }
.function { color:#61dafb; }
.variable { color:#9cdcfe; }
.string { color:#ce9178; }
.success { color:#4ec9b0; }

#typing-code {
    white-space: pre-wrap;
}

.cursor {
    color:#00aaff;
    font-weight:bold;
    animation:blink .8s infinite;
}

.code-editor pre {
    text-align:left;
    padding-left:25px;
}

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

@media (max-width: 600px) {
    .card {
        flex-basis: 100%;
        min-width: 0; /* overrides the default flex min-width:auto so cards can
                         actually shrink to fit narrow phones instead of overflowing */
    }
}

@media (max-width: 640px) {
    /* once the navbar wraps, give nav its own full row and center the button
       instead of leaving it left-aligned under the logo */
    nav {
        width: 100%;
        justify-content: center;
    }
}