/* ===========================
   HOUSE OF SCALE
   PREMIUM INDUSTRIAL THEME
=========================== */

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

:root{

    --primary:#00C8FF;
    --secondary:#0A84FF;
    --accent:#00E0FF;

    --background:#05070B;
    --surface:#111827;

    --text:#FFFFFF;
    --muted:#B8C0CC;

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

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:white;

    font-family:Poppins,sans-serif;

    overflow-x:hidden;

}

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

.grid-background{

    position:fixed;

    inset:0;

    background:

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

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

    background-size:60px 60px;

    z-index:-5;

}

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

.glow{

    position:fixed;

    width:500px;

    height:500px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.15;

}

.glow1{

    background:#00C8FF;

    top:-180px;

    left:-180px;

}

.glow2{

    background:#0047FF;

    bottom:-200px;

    right:-200px;

}

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

header{

    width:100%;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

    position:fixed;

    top:0;

    backdrop-filter:blur(16px);

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

    border-bottom:1px solid rgba(255,255,255,.05);

    z-index:100;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:30px;

    font-weight:700;

    letter-spacing:2px;

    font-family:Orbitron,sans-serif;

}

/* FIX 4: Logo image sizing */
.logo-img{

    height:42px;

    width:auto;

    object-fit:contain;

    display:block;

}

/* FIX 4: Logo text wrapper */
.logo-text{

    font-family:Orbitron,sans-serif;

    font-weight:700;

    letter-spacing:2px;

}

.logo-text span,
.logo span{

    color:var(--primary);

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    color:#ddd;

    text-decoration:none;

    transition:.3s;

    font-weight:500;

}

nav a:hover{

    color:var(--primary);

}

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

.hero{

    min-height:100vh;

    padding:150px 8% 80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

}

.hero-left{

    flex:1;

}

.mini-title{

    color:var(--primary);

    letter-spacing:4px;

    margin-bottom:25px;

    font-size:14px;

    text-transform:uppercase;

}

.hero h1{

    font-family:Orbitron,sans-serif;

    font-size:72px;

    line-height:1.1;

    margin-bottom:30px;

}

.hero-text{

    color:var(--muted);

    line-height:1.9;

    max-width:650px;

    margin-bottom:45px;

}

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

.buttons{

    display:flex;

    gap:20px;

}

button{

    padding:16px 34px;

    border:none;

    cursor:pointer;

    border-radius:12px;

    font-size:16px;

    transition:.3s;

}

.primary{

    background:linear-gradient(90deg,#00C8FF,#0A84FF);

    color:white;

}

.primary:hover{

    transform:translateY(-4px);

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

}

.secondary{

    background:transparent;

    color:white;

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

}

.secondary:hover{

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

}

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

.hero-right{

    flex:1;

    display:flex;

    flex-direction:column;   /* Stack truck above indicator */

    align-items:center;

    gap:20px;

}

.indicator{

    width:480px;  /* Match truck-area width */

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

    backdrop-filter:blur(15px);

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

    border-radius:25px;

    padding:30px 35px;

    box-shadow:

    0 0 60px rgba(0,200,255,.12);

}

.indicator-top{

    text-align:center;

    font-size:20px;

    margin-bottom:35px;

    letter-spacing:2px;

}

.display{

    background:black;

    border-radius:15px;

    padding:30px;

    text-align:center;

    font-family:Orbitron,sans-serif;

    color:#00FF9C;

    box-shadow:inset 0 0 30px rgba(0,255,155,.15);

    /* LED glow animation merged here */
    animation:ledGlow 2s infinite alternate;

}

.display span{

    font-size:56px;

    letter-spacing:4px;

}

/* FIX 9: Renamed from small to .unit span */
.display .unit{

    font-size:22px;

    margin-left:6px;

}

.status{

    margin-top:25px;

    text-align:center;

    color:#8EE6FF;

    letter-spacing:2px;

}

.progress{

    width:100%;

    height:10px;

    margin-top:30px;

    background:#111;

    border-radius:20px;

    overflow:hidden;

}

.progress-bar{

    width:20%;

    height:100%;

    background:linear-gradient(90deg,#00C8FF,#00FF9C);

}

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

.services{

    padding:100px 8%;

}

.services h2{

    text-align:center;

    font-size:46px;

    font-family:Orbitron,sans-serif;

    margin-bottom:70px;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.card{

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

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

    border-radius:20px;

    padding:40px;

    text-align:center;

    transition:.35s;

    font-size:42px;

}

.card h3{

    margin-top:20px;

    font-size:20px;

    font-weight:600;

}

.card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 15px 35px rgba(0,200,255,.15);

}

/*=======================
LAUNCH / COMING SOON
========================*/

.launch{

    padding:100px 10%;

    text-align:center;

}

.launch-badge{

    display:inline-block;

    background:linear-gradient(90deg,rgba(0,200,255,.15),rgba(0,71,255,.15));

    border:1px solid rgba(0,200,255,.3);

    color:var(--primary);

    padding:8px 22px;

    border-radius:50px;

    font-size:13px;

    letter-spacing:3px;

    margin-bottom:28px;

}

.launch h2{

    font-size:48px;

    font-family:Orbitron,sans-serif;

    margin-bottom:25px;

    background:linear-gradient(90deg,#fff,var(--primary));

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.launch > p{

    max-width:800px;

    margin:auto auto 50px;

    line-height:2;

    color:var(--muted);

    font-size:18px;

}

.launch-notify{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.launch-notify input{

    padding:16px 24px;

    border-radius:12px;

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

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

    color:white;

    font-size:16px;

    font-family:Poppins,sans-serif;

    width:320px;

    outline:none;

    transition:.3s;

}

.launch-notify input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(0,200,255,.15);

}

.launch-notify input::placeholder{

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

}

.launch-note{

    margin-top:20px;

    font-size:15px;

    color:#00FF9C;

    min-height:24px;

}

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


footer{

    padding:60px 20px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-logo{

    font-family:Orbitron,sans-serif; /* FIX 10: Added sans-serif fallback */

    font-size:28px;

    margin-bottom:20px;

}

footer p{

    color:var(--muted);

    margin:8px 0;

}

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

/*======================
RESPONSIVE — TABLET (≤1000px)
=======================*/

@media(max-width:1000px){

.hero{
    flex-direction:column;
    text-align:center;
    padding:130px 6% 60px;
}

.hero h1{
    font-size:52px;
}

.buttons{
    justify-content:center;
    flex-wrap:wrap;
}

.hero-text{
    margin:auto auto 40px;
}

nav{
    display:none;
}

.indicator{
    width:100%;
    max-width:500px;
}

.truck-area{
    width:100%;
    max-width:500px;
}

.launch h2{
    font-size:36px;
}

}

/*======================
RESPONSIVE — MOBILE (≤600px)
=======================*/

@media(max-width:600px){

/* Header */
header{
    padding:0 5%;
    height:70px;
}

.logo-img{
    height:32px;
}

.logo-text{
    font-size:18px;
    letter-spacing:1px;
}

/* Hero */
.hero{
    padding:100px 5% 50px;
    gap:40px;
}

.hero h1{
    font-size:36px;
    line-height:1.2;
}

.mini-title{
    font-size:11px;
    letter-spacing:2px;
}

.hero-text{
    font-size:14px;
    line-height:1.8;
}

button{
    padding:13px 24px;
    font-size:14px;
}

/* Truck & Scale */
.truck-area{
    width:100%;
    max-width:100%;
}

.truck{
    height:52px;
}

/* Indicator / Weight Display */
.indicator{
    width:100%;
    max-width:100%;
    padding:20px;
}

.indicator-top{
    font-size:14px;
    margin-bottom:20px;
    letter-spacing:1px;
}

.display span{
    font-size:38px;
    letter-spacing:2px;
}

.display .unit{
    font-size:16px;
}

.display{
    padding:18px;
}

/* Services Cards */
.services{
    padding:60px 5%;
}

.services h2{
    font-size:30px;
    margin-bottom:40px;
}

.cards{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:16px;
}

.card{
    padding:24px 16px;
    font-size:32px;
}

.card h3{
    font-size:14px;
    margin-top:12px;
}

/* Launch section */
.launch{
    padding:60px 5%;
}

.launch h2{
    font-size:26px;
}

.launch > p{
    font-size:15px;
}

.launch-notify{
    flex-direction:column;
    align-items:center;
}

.launch-notify input{
    width:100%;
    max-width:100%;
}

/* Footer */
footer{
    padding:40px 5%;
}

.footer-logo{
    font-size:20px;
}

}

/*======================
Keyframe Animations
=======================*/

@keyframes ledGlow{

from{

box-shadow:
inset 0 0 20px rgba(0,255,150,.2),
0 0 20px rgba(0,255,150,.15);

}

to{

box-shadow:
inset 0 0 40px rgba(0,255,150,.5),
0 0 50px rgba(0,255,150,.3);

}

}

.progress-bar{

background-size:300%;

animation:progressGlow 3s linear infinite;

}

@keyframes progressGlow{

0%{

background-position:left;

}

100%{

background-position:right;

}

}

/*=====================
Truck Animation
======================*/

.truck-area{

    position:relative;

    width:480px;             /* Wider: full platform */

    height:110px;            /* Taller for SVG truck */

    margin-bottom:0;         /* Gap handled by hero-right gap */

    overflow:hidden;         /* Clip truck off edges cleanly */

}

.bridge{

    position:absolute;

    bottom:18px;

    left:0;

    width:100%;

    height:14px;

    /* Realistic weighbridge platform look */
    background:linear-gradient(180deg,#888 0%,#555 60%,#333 100%);

    border-radius:4px;

    box-shadow:0 4px 12px rgba(0,0,0,.5), 0 0 8px rgba(0,200,255,.15);

}

.truck{

    position:absolute;

    left:520px;              /* Start off right edge */

    bottom:28px;             /* Sit on top of bridge */

    height:72px;             /* SVG scales proportionally */

    width:auto;

    display:block;

    /* Faces right — truck drives right→left (reversing onto scale) */

}