@import url('https://www.hottyres.com.au/https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&display=swap');

:root{

--ht-orange:#FF6B00;
--ht-orange-light:#FF8533;
--ht-orange-dark:#E55A00;
--ht-yellow:#FFB800;
--ht-yellow-light:#FFCC33;
--ht-green:#00C853;

--ht-bg-darkest:#0a0a0a;
--ht-bg-dark:#0f0f0f;
--ht-bg-primary:#161616;
--ht-bg-elevated:#1e1e1e;
--ht-bg-card:#252525;

--ht-text-white:#ffffff;
--ht-text-primary:#e5e5e5;
--ht-text-secondary:#a0a0a0;
--ht-text-muted:#707070;

--ht-gradient:linear-gradient(135deg,#FF6B00 0%,#FFB800 100%);
--ht-gradient-hover:linear-gradient(135deg,#FF8533 0%,#FFCC33 100%);
--ht-glow:0 0 30px rgba(255,107,0,0.4);
--ht-glow-strong:0 0 50px rgba(255,107,0,0.6);

--font-heading:'Oswald','Impact','Arial Black',sans-serif;
--font-body:'Raleway','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;

--section-padding:100px 0;
--container-width:1200px;

--radius-sm:8px;
--radius-md:12px;
--radius-lg:20px;
--radius-xl:30px;
}

#main-content *,
#main-content *::before,
#main-content *::after{
box-sizing:border-box;
}

#main-content{
font-family:var(--font-body);
background:var(--ht-bg-darkest);
color:var(--ht-text-primary);
line-height:1.7;
font-size:17px;
-webkit-font-smoothing:antialiased;
}

#main-content h1,
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6{
font-family:var(--font-heading);
line-height:1.2;
color:var(--ht-text-white);
}

#main-content img{
max-width:100%;
height:auto;
display:block;
}

#main-content a{
color:var(--ht-orange);
text-decoration:none;
transition:all 0.3s ease;
}

#main-content a:hover{
color:var(--ht-yellow);
}

.urgency-banner{
background:linear-gradient(90deg,var(--ht-orange-dark) 0%,var(--ht-orange) 50%,var(--ht-orange-dark) 100%);
padding:14px 20px;
text-align:center;
}

#main-content .urgency-banner p,
.urgency-banner p{
font-family:var(--font-heading);
font-size:15px;
font-weight:600;
color:white;
margin:0;
letter-spacing:0.5px;
}

.urgency-banner strong{
color:var(--ht-yellow);
}

#main-content .container{
max-width:var(--container-width);
margin:0 auto;
padding:0 24px;
}

#main-content .breadcrumb{
display:flex;
align-items:center;
gap:8px;
margin-bottom:28px;
font-size:14px;
}

#main-content .breadcrumb a{
color:var(--ht-text-secondary);
transition:color 0.3s ease;
}

#main-content .breadcrumb a:hover{
color:var(--ht-orange);
}

#main-content .breadcrumb span{
color:var(--ht-text-muted);
}

#main-content .breadcrumb svg{
color:var(--ht-text-muted);
flex-shrink:0;
}

#main-content .hero{
min-height:85vh;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
padding:60px 0 80px;
background:var(--ht-bg-darkest);
}

#main-content .hero-glow{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(ellipse 80% 60% at 10% 40%,rgba(255,107,0,0.20) 0%,transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 70%,rgba(255,184,0,0.15) 0%,transparent 50%),
radial-gradient(ellipse 40% 40% at 50% 90%,rgba(255,107,0,0.10) 0%,transparent 40%);
z-index:1;
pointer-events:none;
}

#main-content .hero-pattern{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:
repeating-linear-gradient(90deg,
transparent,transparent 50px,
rgba(255,107,0,0.02) 50px,rgba(255,107,0,0.02) 51px),
repeating-linear-gradient(0deg,
transparent,transparent 50px,
rgba(255,107,0,0.02) 50px,rgba(255,107,0,0.02) 51px);
z-index:2;
pointer-events:none;
}

#main-content .hero .container{
position:relative;
z-index:5;
}

#main-content .hero-content{
max-width:800px;
}

#main-content .hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
background:rgba(255,107,0,0.12);
border:1px solid rgba(255,107,0,0.35);
border-radius:50px;
padding:12px 24px;
margin-bottom:28px;
backdrop-filter:blur(10px);
}

#main-content .hero-badge-dot{
width:10px;
height:10px;
background:var(--ht-green);
border-radius:50%;
animation:ht-pulse 2s ease-in-out infinite;
box-shadow:0 0 10px rgba(0,200,83,0.5);
}

@keyframes ht-pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.6;transform:scale(1.15)}
}

#main-content .hero-badge-text{
font-size:14px;
font-weight:600;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--ht-orange);
}

#main-content .hero h1{
font-family:var(--font-heading);
font-size:clamp(44px,7vw,72px);
font-weight:700;
line-height:1.05;
color:var(--ht-text-white);
margin-bottom:28px;
text-shadow:0 4px 30px rgba(0,0,0,0.5);
}

#main-content .hero h1 .highlight{
background:var(--ht-gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
display:inline-block;
}

#main-content .hero-subtitle{
font-size:20px;
color:var(--ht-text-secondary);
line-height:1.75;
margin-bottom:45px;
max-width:620px;
}

#main-content .hero-buttons{
display:flex;
flex-wrap:wrap;
gap:20px;
margin-bottom:60px;
}

#main-content .hero-stats{
display:flex;
gap:50px;
padding-top:40px;
border-top:1px solid rgba(255,107,0,0.15);
}

#main-content .hero-stat{
text-align:left;
}

#main-content .hero-stat-number{
font-family:var(--font-heading);
font-size:48px;
font-weight:700;
background:var(--ht-gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
line-height:1;
margin-bottom:8px;
}

#main-content .hero-stat-label{
font-size:14px;
font-weight:500;
color:var(--ht-text-secondary);
text-transform:uppercase;
letter-spacing:1px;
}

#main-content .hero-image{
margin-top:50px;
border-radius:var(--radius-lg);
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

#main-content .btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:18px 40px;
font-family:var(--font-heading);
font-size:16px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
border:none;
border-radius:var(--radius-md);
cursor:pointer;
transition:all 0.3s ease;
text-decoration:none;
}

#main-content .btn-primary{
background:var(--ht-gradient);
color:var(--ht-text-white);
box-shadow:0 4px 25px rgba(255,107,0,0.4);
}

#main-content .btn-primary:hover{
background:var(--ht-gradient-hover);
box-shadow:var(--ht-glow-strong);
transform:translateY(-3px);
color:var(--ht-text-white);
}

#main-content .btn-secondary{
background:transparent;
color:var(--ht-text-white);
border:2px solid var(--ht-orange);
}

#main-content .btn-secondary:hover{
background:var(--ht-orange);
color:var(--ht-text-white);
}

#main-content .btn-white{
background:var(--ht-text-white);
color:var(--ht-orange-dark);
font-weight:700;
}

#main-content .btn-white:hover{
background:var(--ht-bg-darkest);
color:var(--ht-text-white);
box-shadow:0 10px 40px rgba(0,0,0,0.3);
}

#main-content .btn-outline-white{
background:transparent;
color:var(--ht-text-white);
border:2px solid rgba(255,255,255,0.8);
}

#main-content .btn-outline-white:hover{
background:var(--ht-text-white);
color:var(--ht-orange);
}

#main-content .btn-lg{
padding:20px 50px;
font-size:18px;
}

#main-content .section-header{
text-align:center;
margin-bottom:60px;
}

#main-content .section-label{
font-family:var(--font-heading);
font-size:14px;
font-weight:600;
letter-spacing:3px;
text-transform:uppercase;
color:var(--ht-orange);
margin-bottom:16px;
display:block;
}

#main-content .section-title{
font-family:var(--font-heading);
font-size:clamp(32px,5vw,52px);
font-weight:700;
color:var(--ht-text-white);
line-height:1.2;
margin-bottom:20px;
}

#main-content .section-title .highlight{
background:var(--ht-gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}

#main-content .content-section{
padding:var(--section-padding);
position:relative;
overflow:hidden;
background:var(--ht-bg-darkest);
}

#main-content .content-section.bg-dark{
background:var(--ht-bg-dark);
}

#main-content .content-section::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,107,0,0.3),transparent);
}

#main-content .content-body{
max-width:900px;
margin:0 auto;
}

#main-content .content-body p{
font-size:17px;
color:var(--ht-text-primary);
line-height:1.8;
margin-bottom:1.25rem;
}

#main-content .content-body h3{
font-family:var(--font-heading);
font-size:clamp(22px,3vw,28px);
font-weight:600;
color:var(--ht-text-white);
margin-top:2.5rem;
margin-bottom:1rem;
}

#main-content .content-body h4{
font-family:var(--font-heading);
font-size:20px;
font-weight:600;
color:var(--ht-text-white);
margin-bottom:0.75rem;
}

#main-content .content-body ul,
#main-content .content-body ol{
padding-left:1.5rem;
margin-bottom:1.5rem;
color:var(--ht-text-primary);
}

#main-content .content-body li{
margin-bottom:0.75rem;
line-height:1.7;
}

#main-content .content-body strong{
color:var(--ht-text-white);
}

#main-content .content-body .highlight{
background:var(--ht-gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}

#main-content .content-table{
width:100%;
border-collapse:collapse;
margin:2rem 0;
border-radius:var(--radius-md);
overflow:hidden;
font-size:15px;
}

#main-content .content-table thead th{
background:var(--ht-gradient);
color:var(--ht-text-white);
font-family:var(--font-heading);
font-weight:600;
font-size:14px;
letter-spacing:0.5px;
text-transform:uppercase;
padding:16px 20px;
text-align:left;
}

#main-content .content-table tbody td{
background:var(--ht-bg-elevated);
color:var(--ht-text-primary);
padding:14px 20px;
border-bottom:1px solid rgba(255,107,0,0.08);
}

#main-content .content-table tbody tr:hover td{
background:var(--ht-bg-card);
}

#main-content .content-table tbody td strong{
color:var(--ht-text-white);
}

#main-content .content-table tbody td a{
color:var(--ht-orange);
}

#main-content .content-table tbody td a:hover{
color:var(--ht-yellow);
}

#main-content .feature-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
margin:2rem 0;
}

#main-content .feature-item{
background:linear-gradient(180deg,var(--ht-bg-elevated) 0%,var(--ht-bg-card) 100%);
border:1px solid rgba(255,107,0,0.1);
border-radius:var(--radius-md);
padding:32px 28px;
transition:all 0.3s ease;
}

#main-content .feature-item:hover{
transform:translateY(-4px);
border-color:rgba(255,107,0,0.25);
box-shadow:0 15px 40px rgba(0,0,0,0.3),0 0 30px rgba(255,107,0,0.08);
}

#main-content .feature-item h4{
font-family:var(--font-heading);
font-size:18px;
font-weight:600;
color:var(--ht-text-white);
margin-bottom:12px;
}

#main-content .feature-item p{
font-size:15px;
color:var(--ht-text-secondary);
line-height:1.7;
margin:0;
}

#main-content .faq-section{
padding:var(--section-padding);
background:var(--ht-bg-dark);
}

#main-content .faq-grid{
max-width:900px;
margin:0 auto;
}

#main-content .faq-item{
background:var(--ht-bg-elevated);
border:1px solid rgba(255,107,0,0.1);
border-radius:var(--radius-md);
margin-bottom:16px;
overflow:hidden;
transition:all 0.3s ease;
}

#main-content .faq-item:hover{
border-color:rgba(255,107,0,0.25);
}

#main-content .faq-item.active{
border-left:3px solid var(--ht-orange);
}

#main-content .faq-question{
width:100%;
padding:24px 28px;
display:flex;
align-items:center;
justify-content:space-between;
background:none;
border:none;
cursor:pointer;
text-align:left;
color:inherit;
font-family:inherit;
}

#main-content .faq-question h3{
font-family:var(--font-heading);
font-size:18px;
font-weight:600;
color:var(--ht-text-white);
margin:0;
padding-right:20px;
}

#main-content .faq-question .faq-icon{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,107,0,0.1);
border-radius:50%;
color:var(--ht-orange);
flex-shrink:0;
transition:all 0.3s ease;
}

#main-content .faq-item.active .faq-icon{
background:var(--ht-gradient);
color:white;
transform:rotate(180deg);
}

#main-content .faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;
}

#main-content .faq-item.active .faq-answer{
max-height:500px;
}

#main-content .faq-answer p{
padding:0 28px 24px;
color:var(--ht-text-secondary);
line-height:1.8;
margin:0;
font-size:16px;
}

#main-content .why-us-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
}

#main-content .why-us-card{
background:linear-gradient(180deg,var(--ht-bg-elevated) 0%,var(--ht-bg-card) 100%);
border:1px solid rgba(255,107,0,0.1);
border-radius:var(--radius-lg);
padding:36px 28px;
transition:all 0.4s ease;
position:relative;
}

#main-content .why-us-card::before{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:0;
height:3px;
background:var(--ht-gradient);
transition:width 0.4s ease;
}

#main-content .why-us-card:hover{
transform:translateY(-8px);
border-color:rgba(255,107,0,0.2);
box-shadow:0 20px 50px rgba(0,0,0,0.3);
}

#main-content .why-us-card:hover::before{
width:80%;
}

#main-content .why-us-card h3{
font-family:var(--font-heading);
font-size:20px;
font-weight:600;
color:var(--ht-text-white);
margin-bottom:12px;
}

#main-content .why-us-card p{
font-size:15px;
color:var(--ht-text-secondary);
line-height:1.7;
margin:0;
}

#main-content .areas{
margin-top:2rem;
}

#main-content .areas-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-bottom:28px;
}

#main-content .area-tag{
padding:12px 14px;
background:var(--ht-bg-elevated);
border:1px solid rgba(255,255,255,0.06);
border-radius:var(--radius-sm);
font-size:14px;
font-weight:500;
color:var(--ht-text-secondary);
text-align:center;
transition:all 0.3s ease;
cursor:default;
}

#main-content .area-tag:hover{
background:rgba(255,107,0,0.1);
border-color:rgba(255,107,0,0.2);
color:var(--ht-text-white);
transform:translateY(-2px);
}

#main-content .area-tag.primary{
background:rgba(255,107,0,0.08);
border-color:rgba(255,107,0,0.2);
color:var(--ht-orange-light);
font-weight:600;
}

#main-content .area-tag.primary:hover{
background:rgba(255,107,0,0.15);
color:var(--ht-text-white);
}

#main-content .cta-banner{
background:var(--ht-gradient);
padding:100px 0;
text-align:center;
position:relative;
overflow:hidden;
}

#main-content .cta-banner::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
radial-gradient(circle at 20% 50%,rgba(255,255,255,0.1) 0%,transparent 30%),
radial-gradient(circle at 80% 50%,rgba(0,0,0,0.1) 0%,transparent 30%);
}

#main-content .cta-banner-content{
position:relative;
z-index:1;
}

#main-content .cta-banner h2{
font-family:var(--font-heading);
font-size:clamp(32px,5vw,52px);
font-weight:700;
color:var(--ht-text-white);
margin-bottom:20px;
text-shadow:0 4px 20px rgba(0,0,0,0.2);
}

#main-content .cta-banner p{
font-size:19px;
color:rgba(255,255,255,0.9);
margin-bottom:45px;
max-width:650px;
margin-left:auto;
margin-right:auto;
line-height:1.7;
}

#main-content .cta-banner-buttons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.mobile-cta{
display:none;
position:fixed;
bottom:0;
left:0;
right:0;
z-index:1000;
padding:16px;
background:rgba(10,10,10,0.95);
backdrop-filter:blur(10px);
border-top:1px solid rgba(255,107,0,0.2);
}

.mobile-cta .btn{
width:100%;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:18px 40px;
font-family:var(--font-heading);
font-size:16px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
border:none;
border-radius:var(--radius-md);
cursor:pointer;
transition:all 0.3s ease;
text-decoration:none;
background:var(--ht-gradient);
color:var(--ht-text-white);
box-shadow:0 4px 25px rgba(255,107,0,0.4);
}

#main-content .fade-in{
opacity:0;
transform:translateY(30px);
transition:opacity 0.6s ease-out,transform 0.6s ease-out;
}

#main-content .fade-in.visible{
opacity:1;
transform:translateY(0);
}

@media (max-width:1024px){
#main-content .hero-content{
max-width:100%;
text-align:center;
}

#main-content .hero-buttons{
justify-content:center;
}

#main-content .hero-stats{
justify-content:center;
gap:30px;
}

#main-content .feature-grid{
grid-template-columns:1fr;
}

#main-content .why-us-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:768px){
:root{
--section-padding:70px 0;
}

#main-content .hero{
min-height:auto;
padding:40px 0 60px;
}

#main-content .hero h1{
font-size:38px;
}

#main-content .hero-buttons{
flex-direction:column;
}

#main-content .hero-buttons .btn{
width:100%;
}

#main-content .hero-stats{
flex-direction:column;
gap:20px;
align-items:flex-start;
}

#main-content .why-us-grid{
grid-template-columns:1fr;
}

#main-content .faq-question h3{
font-size:16px;
}

#main-content .areas-grid{
grid-template-columns:repeat(2,1fr);
}

.mobile-cta{
display:block;
}

#main-content .content-table{
display:block;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

#main-content .cta-banner{
padding:70px 0;
}

#main-content .cta-banner h2{
font-size:28px;
}

#main-content .cta-banner p{
font-size:16px;
}
}

@media (max-width:480px){
#main-content .container{
padding:0 16px;
}

#main-content .section-title{
font-size:28px;
}

#main-content .hero h1{
font-size:32px;
}

#main-content .hero-stat-number{
font-size:36px;
}

#main-content .btn{
padding:16px 28px;
font-size:14px;
}

#main-content .btn-lg{
padding:18px 36px;
font-size:16px;
}

#main-content .areas-grid{
grid-template-columns:repeat(2,1fr);
}

#main-content .cta-banner-buttons{
flex-direction:column;
align-items:center;
}

#main-content .cta-banner-buttons .btn{
width:100%;
}

#main-content .why-us-card{
padding:28px 22px;
}

#main-content .faq-question{
padding:20px 22px;
}

#main-content .faq-answer p{
padding:0 22px 20px;
}
}