/* ==========================================================
   TensorEDA Responsive Design
   Mobile • Tablet • Desktop
   ========================================================== */

/* ---------- Large screens ---------- */

@media (max-width:1400px){

.hero h1{

font-size:72px;

}

}

/* ---------- Laptop ---------- */

@media (max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero-copy{

display:flex;

flex-direction:column;

align-items:center;

}

.hero p{

margin:auto;

}

.hero-actions{

justify-content:center;

}

.cards{

grid-template-columns:1fr;

max-width:700px;

margin:auto;

}

.footer{

grid-template-columns:1fr 1fr;

row-gap:50px;

}

}

/* ---------- Tablet ---------- */

@media (max-width:900px){

header{

padding:0 20px;

}

nav{

display:none;

}

.hero{

padding-top:120px;

padding-bottom:80px;

}

.hero h1{

font-size:54px;

letter-spacing:-2px;

}

.hero p{

font-size:19px;

line-height:1.7;

}

.section{

padding:100px 0;

}

.section h2{

font-size:42px;

}

.section p{

font-size:18px;

}

.cta{

padding:100px 0;

}

.cta h2{

font-size:42px;

}

.cta p{

font-size:18px;

}

#tensorNetwork{

width:340px;

height:340px;

}

.footer{

grid-template-columns:1fr;

text-align:center;

}

.footer a{

display:inline-block;

margin:8px;

}

}

/* ---------- Mobile ---------- */

@media (max-width:600px){

.container{

width:92%;

}

.hero{

min-height:auto;

padding-top:120px;

padding-bottom:70px;

}

.hero h1{

font-size:42px;

line-height:1.08;

}

.hero p{

font-size:17px;

}

.hero-actions{

flex-direction:column;

width:100%;

}

.btn-primary,

.btn-secondary{

width:100%;

}

.section{

padding:80px 0;

}

.section h2{

font-size:34px;

}

.cards{

gap:20px;

}

.card{

padding:32px;

}

.card h3{

font-size:28px;

}

.card p{

font-size:16px;

}

.cta h2{

font-size:34px;

}

.modal{

padding:30px;

border-radius:18px;

}

.modal h2{

font-size:30px;

}

.modal input,

.modal textarea{

padding:14px;

}

#cookieBanner{

left:15px;

right:15px;

bottom:15px;

flex-direction:column;

text-align:center;

gap:18px;

}

#cookieBanner button{

width:100%;

}

}

/* ---------- Small phones ---------- */

@media (max-width:400px){

.hero h1{

font-size:36px;

}

.logo{

font-size:24px;

}

.section h2{

font-size:30px;

}

}