/* =====================================================
 HOSUN V6 SEMICONDUCTOR CORPORATE DESIGN SYSTEM
===================================================== */


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


html{
scroll-behavior:smooth;
}



body{

font-family:
"Inter",
"Microsoft YaHei",
Arial,
sans-serif;

background:#020817;

color:#fff;

overflow-x:hidden;

}



:root{

--blue:#1683ff;

--cyan:#00d9ff;

--dark:#020817;

--text:#dbe8ff;

--card:
rgba(255,255,255,.05);

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

}




/* =====================================================
 CONTAINER
===================================================== */


.container{

width:1400px;

max-width:90%;

margin:auto;

}



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


#header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

transition:.35s;

}



#header.active{

background:

rgba(2,8,23,.82);

backdrop-filter:

blur(18px);


border-bottom:

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

}




.nav{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}




/* BRAND */


.brand{

display:flex;

align-items:center;

gap:15px;

font-size:22px;

font-weight:700;

letter-spacing:2px;

}



.brand small{

display:block;

font-size:11px;

font-weight:400;

color:#8aa4c8;

letter-spacing:3px;

}




.logo svg{

width:55px;

height:55px;

filter:

drop-shadow(
0 0 15px #1683ff
);

}





/* NAVIGATION */


nav{

display:flex;

gap:38px;

}



nav a{

color:#c8d7ee;

text-decoration:none;

font-size:15px;

position:relative;

transition:.3s;

}



nav a:hover,
nav a.active{

color:#fff;

}


.grid-4 .card{

min-height:160px;


padding:25px 28px;


}




nav a.active::after{

content:"";

position:absolute;

bottom:-12px;

left:0;

width:100%;

height:2px;


background:

linear-gradient(
90deg,
#1683ff,
#00d9ff
);

}




.mobile-btn{

display:none;

font-size:28px;

cursor:pointer;

color:#00d9ff;

}



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


.hero{

min-height:100vh;

position:relative;

overflow:hidden;

display:flex;

align-items:center;


background:


radial-gradient(
circle at 80% 40%,
rgba(0,120,255,.22),
transparent 35%
),


linear-gradient(
135deg,
#020817,
#05254b
);


}




/* 背景网格 */


.hero-grid{

position:absolute;

inset:0;


background-image:


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


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



background-size:

100px 100px;


opacity:.35;

}





.hero .container{

position:relative;

z-index:5;

}





.hero-content{

width:620px;

animation:

heroIn 1s ease;

}





@keyframes heroIn{


from{

opacity:0;

transform:
translateY(40px);

}


to{

opacity:1;

transform:
translateY(0);

}


}





.hero-tag{


font-size:13px;


letter-spacing:5px;


color:#00d9ff;


margin-bottom:35px;


}





.hero h1{


font-size:68px;


line-height:1.15;


letter-spacing:-3px;


font-weight:800;


margin-bottom:35px;


}





.hero h1 span{


background:


linear-gradient(
90deg,
#1683ff,
#00d9ff
);



-webkit-background-clip:text;


color:transparent;


}





.hero p{


font-size:19px;


line-height:2;


color:#a9bdd8;


width:540px;


margin-bottom:45px;


}






/* =====================================================
 BUTTON
===================================================== */


.hero-buttons{

display:flex;

gap:20px;

}




.btn{


padding:

16px 35px;


border-radius:50px;


background:

linear-gradient(
90deg,
#1683ff,
#00d9ff
);


color:white;


text-decoration:none;


font-weight:600;


transition:.35s;


display:inline-block;


}



.btn:hover{


transform:

translateY(-5px);


box-shadow:


0 15px 40px

rgba(0,217,255,.3);


}




.btn-outline{

background:transparent;

border:0.5px solid rgba(255,255,255,.18);

}

.hero-buttons .btn-outline{

border-color:rgba(255,255,255,.18);

}






/* =====================================================
 HERO CHIP IMAGE
 替代原来的 chip-box 圆环
===================================================== */



.hero-image{

position:absolute;

right:6%;

top: 48%;

transform:

translateY(-50%);

width:500px;

z-index:3;

}




.hero-image img{


width:100%;


border-radius:30px;


filter:


drop-shadow(

0 30px 60px

rgba(0,140,255,.45)

);



animation:

imageFloat

6s ease-in-out infinite;


}





@keyframes imageFloat{


0%,
100%{


transform:

translateY(0);


}



50%{


transform:

translateY(-15px);


}


}





.hero-image::before{


content:"";


position:absolute;


inset:-40px;



background:


radial-gradient(

circle,

rgba(0,217,255,.25),

transparent 65%

);



filter:

blur(30px);



z-index:-1;


}







/* =====================================================
 TECH TAGS
===================================================== */


.tech-tags{


display:flex;


gap:20px;


margin-top:60px;


}



.tech-tags div{


padding:

18px 25px;


border:


1px solid

rgba(255,255,255,.15);



background:


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



backdrop-filter:

blur(12px);



border-radius:14px;



font-size:14px;



transition:.35s;



}



.tech-tags div:hover{


transform:

translateY(-6px);



border-color:

#00d9ff;



}
/* =====================================================
 CARD SYSTEM
===================================================== */


.card{


background:

rgba(255,255,255,.045);


border:

1px solid

rgba(255,255,255,.1);



border-radius:20px;


padding:35px;


min-height:320px;


transition:

transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;



backdrop-filter:

blur(15px);



position:relative;


overflow:hidden;


}




.card:hover{


transform:

translateY(-8px);



border-color:

rgba(0,217,255,.65);



box-shadow:


0 20px 60px

rgba(0,217,255,.18);



}




.card h3{


font-size:24px;


margin-bottom:20px;


}




.card p{


color:#9eb4d1;


line-height:1.8;


}




/* 卡片顶部光线 */


.card::before{


content:"";


position:absolute;


top:0;


left:-100%;


width:80%;


height:2px;



background:


linear-gradient(

90deg,

transparent,

#00d9ff,

transparent

);



transition:.6s;


}



.card:hover::before{


left:120%;


}





/* =====================================================
 SCROLL REVEAL
===================================================== */


.reveal{


opacity:0;


transform:

translateY(40px);


transition:

.8s ease;


}




.reveal.active{


opacity:1;


transform:

translateY(0);


}







/* =====================================================
 SECTION SYSTEM
===================================================== */


.section{


padding:

120px 0;


position:relative;


}





.section-title{


text-align:center;


margin-bottom:70px;


}



.section-title span{


display:block;


font-size:13px;


letter-spacing:5px;


color:#00d9ff;


margin-bottom:15px;


}




.section-title h2{


font-size:46px;


letter-spacing:-2px;


margin-bottom:20px;


}





.section-title p{


font-size:18px;


color:#91a9c8;


}







/* =====================================================
 GRID
===================================================== */



.grid-4{


display:grid;


grid-template-columns:

repeat(4,1fr);



gap:35px;


}




.grid-3{


display:grid;


grid-template-columns:

repeat(3,1fr);



gap: 35px;


max-width:1400px;


margin:auto;


}




.grid-5{


display:grid;


grid-template-columns:

repeat(5,1fr);



gap:40px;


}







/* =====================================================
 CORE METRICS
===================================================== */


.metrics .card{


text-align:center;


padding:

50px 25px;


}




.metrics h3{


font-size:48px;


background:

linear-gradient(
90deg,
#1683ff,
#00d9ff
);



-webkit-background-clip:text;


color:transparent;


margin-bottom:15px;


}





.metrics p{


font-size:16px;


}






/* =====================================================
 ABOUT SECTION
===================================================== */



.about-icon{


width:70px;


height:70px;



border-radius:20px;



display:flex;


align-items:center;


justify-content:center;



font-size:24px;


font-weight:700;


color:#00d9ff;



background:

rgba(0,217,255,.1);



border:

1px solid

rgba(0,217,255,.25);



margin-bottom:25px;



}




.about-layout{


display:grid;


grid-template-columns:

1fr 1fr;



gap:60px;


align-items:center;


}





.about-image img{


width:100%;


border-radius:30px;


box-shadow:


0 30px 70px

rgba(0,0,0,.4);


}








/* =====================================================
 PRODUCT PLATFORM
===================================================== */



.product-number{


font-size:48px;


font-weight:800;


color:

rgba(0,217,255,.35);



margin-bottom:20px;


}





.grid-4 .card h3{


font-size:22px;


letter-spacing:1px;


color:#fff;


}






/* 产品图片支持 */


.product-image{


width:100%;


height:220px;


overflow:hidden;


border-radius:18px;


margin-bottom:25px;


}



.product-image img{


width:100%;


height:100%;


object-fit:cover;


transition:.5s;


}



.card:hover .product-image img{


transform:

scale(1.08);


}








/* =====================================================
 APPLICATION
===================================================== */



.application-icon{


width:90px;


height:90px;


margin:

0 auto 25px;


display:flex;


align-items:center;


justify-content:center;


}



.application-icon svg{


width:80px;


height:80px;


filter:

drop-shadow(

0 0 15px

rgba(0,217,255,.4)

);



transition:.35s;


}




.card:hover

.application-icon svg{


transform:

scale(1.1);


}




.grid-5 .card{


text-align:center;


padding:

30px 20px;



min-height:auto;
}





.grid-5 h3{


font-size:20px;


margin-bottom:15px;


}





.grid-5 p{


font-size:14px;


line-height:1.8;


}






/* =====================================================
 NEWS
===================================================== */


.news-card{


min-height:230px;


}




.news-card h3{


font-size:22px;


margin-bottom:20px;


}



.news-card p{


color:#9eb4d1;


}






/* =====================================================
 IMAGE COMMON
===================================================== */



img{


max-width:100%;


display:block;


}


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


footer{


background:

#01050d;



border-top:

1px solid

rgba(255,255,255,.08);



padding:

80px 0;


}




.footer-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);



gap:50px;


}





footer h2{


font-size:42px;


letter-spacing:5px;


}




footer h3{


margin-bottom:25px;


}





footer p,
footer a{


display:block;


color:#8ea5c5;


line-height:2;


text-decoration:none;


}





footer a:hover{


color:#00d9ff;


}







/* =====================================================
 SCROLL BAR
===================================================== */


::-webkit-scrollbar{


width:8px;


}




::-webkit-scrollbar-track{


background:#020817;


}




::-webkit-scrollbar-thumb{


background:

linear-gradient(
180deg,
#1683ff,
#00d9ff
);



border-radius:20px;


}








/* =====================================================
 SECTION DIVIDER
===================================================== */


.section::before{


content:"";


position:absolute;


top:0;


left:50%;



transform:

translateX(-50%);



width:80%;



height:1px;



background:

linear-gradient(

90deg,

transparent,

rgba(0,217,255,.35),

transparent

);


}








/* =====================================================
 TABLET
===================================================== */


@media(max-width:1200px){



.container{


width:92%;


}




.hero-content{


width:55%;


}




.hero h1{


font-size:58px;


}





.hero-image{


right:2%;


width:430px;


}




.grid-5{


grid-template-columns:

repeat(3,1fr);


}




}









/* =====================================================
 MOBILE MENU
===================================================== */


@media(max-width:900px){



.nav{


height:75px;


}





nav{


position:absolute;


top:75px;


left:0;


width:100%;



background:

rgba(2,8,23,.96);



display:flex;


flex-direction:column;



gap:25px;



padding:

35px;



opacity:0;



visibility:hidden;



transform:

translateY(-20px);



transition:.35s;


}





nav.show{


opacity:1;


visibility:visible;


transform:

translateY(0);


}





.mobile-btn{


display:block;


}







/* HERO */


.hero{


min-height:900px;


}




.hero .container{


display:flex;


align-items:center;


}





.hero-content{


width:100%;


}



.hero h1{


font-size:48px;


}





.hero p{


width:100%;


font-size:17px;


}





.hero-buttons{


flex-direction:column;


width:220px;


}





.hero-image{


position:absolute;


right:-120px;


top:60%;


width:420px;



opacity:.35;


}




.tech-tags{


flex-direction:column;


width:250px;


}





/* GRID */


.grid-4,
.grid-3,
.grid-5{


grid-template-columns:

repeat(2,1fr);


}




.footer-grid{


grid-template-columns:

1fr;


}




.section{


padding:

90px 0;


}





.section-title h2{


font-size:36px;


}



.about-layout{


grid-template-columns:

1fr;


}





}









/* =====================================================
 SMALL MOBILE
===================================================== */


@media(max-width:600px){



.container{


max-width:92%;


}




.hero{


min-height:850px;


}





.hero h1{


font-size:40px;


letter-spacing:-1px;


}




.hero p{


font-size:15px;


line-height:1.8;


}




.hero-image{


display:none;


}





.tech-tags{


width:100%;


}





.tech-tags div{


padding:

15px;


}





.grid-4,
.grid-3,
.grid-5{


grid-template-columns:

1fr;


}





.section-title h2{


font-size:30px;


}





.section-title p{


font-size:15px;


}





.card{


padding:

25px;


}





.metrics h3{


font-size:40px;


}





footer{


padding:

50px 0;


}





footer h2{


font-size:32px;


}



}






/* =====================================================
 PERFORMANCE
===================================================== */


.hero *,
.card *,
.hero-image *{


will-change:transform;


}


/* =====================================================
 ENHANCED: TECH VISUAL EFFECTS
 科技感视觉增强效果
===================================================== */

/* 发光边框效果 */
.glow-border{
  position:relative;
}

.glow-border::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(45deg,#1683ff,#00d9ff,#1683ff);
  z-index:-1;
  opacity:0;
  transition:.4s;
  filter:blur(10px);
}

.glow-border:hover::after{
  opacity:.6;
}

/* 科技感卡片背景 - 替代缺失图片 */
.tech-bg{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(22,131,255,.3), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,217,255,.2), transparent 50%),
    linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #0a1628 100%);
}

.tech-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,217,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,217,255,.08) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity:.5;
}

.tech-bg::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  border:2px solid rgba(0,217,255,.3);
  border-radius:50%;
  animation: techPulse 3s ease-in-out infinite;
}

@keyframes techPulse{
  0%,100%{
    transform:translate(-50%,-50%) scale(1);
    opacity:.3;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.2);
    opacity:.6;
  }
}

/* 芯片图案背景 */
.chip-pattern{
  position:relative;
  background:
    linear-gradient(135deg, #081220 0%, #0f1f35 100%);
}

.chip-pattern::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(22,131,255,.1) 1px, transparent 1px),
    linear-gradient(rgba(22,131,255,.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.chip-pattern::after{
  display:none;
}

/* 数据流背景 */
.data-flow{
  position:relative;
  background:
    radial-gradient(ellipse at center, rgba(22,131,255,.15) 0%, transparent 70%),
    linear-gradient(180deg, #0a1628 0%, #050d18 100%);
  overflow:hidden;
}

.data-flow::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,217,255,.03) 2px,
      rgba(0,217,255,.03) 4px
    );
  animation: dataFlow 8s linear infinite;
}

@keyframes dataFlow{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(40px); }
}

/* 晶圆图案背景 */
.wafer-bg{
  position:relative;
  background:
    radial-gradient(circle at center, #0d2137 0%, #050d18 70%);
  overflow:hidden;
}

.wafer-bg::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:180px;
  height:180px;
  border:3px solid rgba(0,217,255,.2);
  border-radius:50%;
  box-shadow:
    0 0 40px rgba(0,217,255,.2),
    inset 0 0 40px rgba(0,217,255,.1);
}

.wafer-bg::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  border:2px solid rgba(22,131,255,.3);
  border-radius:50%;
  animation: waferRotate 20s linear infinite;
}

@keyframes waferRotate{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* AI神经网络背景 */
.ai-network{
  position:relative;
  background:
    linear-gradient(135deg, #0a1628 0%, #0d2137 100%);
  overflow:hidden;
}

.ai-network::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(0,217,255,.4) 2px, transparent 2px);
  background-size: 40px 40px;
  opacity:.3;
}

.ai-network::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:80px;
  height:80px;
  background:
    radial-gradient(circle, rgba(0,217,255,.6) 0%, transparent 70%);
  border-radius:50%;
  animation: aiPulse 2s ease-in-out infinite;
}

@keyframes aiPulse{
  0%,100%{
    transform:translate(-50%,-50%) scale(1);
    opacity:.8;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.3);
    opacity:.4;
  }
}

/* 产品图片容器 - CSS渐变背景 */
.product-image{
  position:relative;
}

.product-image.tech-bg::before,
.product-image.chip-pattern::before,
.product-image.data-flow::before,
.product-image.wafer-bg::before,
.product-image.ai-network::before{
  /* 覆盖产品图片的默认样式 */
}

/* 新闻日期标签 */
.news-date{
  display:inline-block;
  padding:8px 16px;
  background:linear-gradient(90deg, rgba(22,131,255,.2), rgba(0,217,255,.2));
  border:1px solid rgba(0,217,255,.3);
  border-radius:20px;
  font-size:13px;
  color:#00d9ff;
  margin-bottom:20px;
  letter-spacing:1px;
}

/* 联系表单样式增强 */
.input-group{
  position:relative;
  margin-bottom:25px;
}

.input-group input,
.input-group textarea{
  width:100%;
  padding:15px 20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  color:#fff;
  font-size:15px;
  transition:.35s;
  outline:none;
}

.input-group input:focus,
.input-group textarea:focus{
  border-color:#00d9ff;
  box-shadow:0 0 20px rgba(0,217,255,.15);
  background:rgba(0,217,255,.03);
}

.input-group label{
  position:absolute;
  left:20px;
  top:15px;
  color:#8aa4c8;
  font-size:15px;
  pointer-events:none;
  transition:.35s;
  background:transparent;
  padding:0 5px;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label{
  top:-10px;
  left:15px;
  font-size:12px;
  color:#00d9ff;
  background:#020817;
}

.submit-btn{
  width:100%;
  padding:16px 35px;
  border:none;
  border-radius:50px;
  background:linear-gradient(90deg, #1683ff, #00d9ff);
  color:white;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition:.35s;
}

.submit-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(0,217,255,.3);
}

/* 招聘流程时间线 */
.process-timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  position:relative;
}

.process-timeline::before{
  content:"";
  position:absolute;
  top:40px;
  left:10%;
  right:10%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(0,217,255,.3), transparent);
}

.process-step{
  text-align:center;
  position:relative;
}

.process-step-number{
  width:80px;
  height:80px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,217,255,.1);
  border:2px solid rgba(0,217,255,.3);
  border-radius:50%;
  font-size:24px;
  font-weight:700;
  color:#00d9ff;
  position:relative;
  z-index:2;
  transition:.35s;
}

.process-step:hover .process-step-number{
  background:rgba(0,217,255,.2);
  box-shadow:0 0 30px rgba(0,217,255,.3);
  transform:scale(1.1);
}

.process-step h3{
  font-size:18px;
  margin-bottom:10px;
}

.process-step p{
  font-size:14px;
  color:#9eb4d1;
  line-height:1.6;
}

/* 页脚增强 */
footer{
  position:relative;
}

footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,217,255,.5), transparent);
}

/* 导航栏logo发光动画 */
.logo svg{
  animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow{
  0%,100%{
    filter:drop-shadow(0 0 15px #1683ff);
  }
  50%{
    filter:drop-shadow(0 0 25px #00d9ff);
  }
}

/* 英雄区域粒子效果 */
.hero-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.hero-particles span{
  position:absolute;
  width:4px;
  height:4px;
  background:#00d9ff;
  border-radius:50%;
  opacity:.6;
  animation: particleFloat 15s infinite;
}

.hero-particles span:nth-child(1){ left:10%; animation-delay:0s; }
.hero-particles span:nth-child(2){ left:20%; animation-delay:2s; }
.hero-particles span:nth-child(3){ left:30%; animation-delay:4s; }
.hero-particles span:nth-child(4){ left:50%; animation-delay:1s; }
.hero-particles span:nth-child(5){ left:70%; animation-delay:3s; }
.hero-particles span:nth-child(6){ left:80%; animation-delay:5s; }
.hero-particles span:nth-child(7){ left:90%; animation-delay:7s; }
.hero-particles span:nth-child(8){ left:15%; animation-delay:6s; }
.hero-particles span:nth-child(9){ left:60%; animation-delay:8s; }
.hero-particles span:nth-child(10){ left:85%; animation-delay:9s; }

@keyframes particleFloat{
  0%{
    transform:translateY(100vh) scale(0);
    opacity:0;
  }
  10%{
    opacity:.6;
  }
  90%{
    opacity:.6;
  }
  100%{
    transform:translateY(-100px) scale(1);
    opacity:0;
  }
}

/* 数字计数器增强 */
.counter{
  font-size:48px;
  font-weight:800;
  background:linear-gradient(90deg, #1683ff, #00d9ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* 响应式 - 招聘流程 */
@media(max-width:900px){
  .process-timeline{
    grid-template-columns:repeat(2,1fr);
  }
  .process-timeline::before{
    display:none;
  }
}

@media(max-width:600px){
  .process-timeline{
    grid-template-columns:1fr;
  }
}

/* 响应式 - 表单 */
@media(max-width:600px){
  .input-group input,
  .input-group textarea{
    padding:12px 15px;
    font-size:14px;
  }
  .input-group label{
    font-size:14px;
  }
}

/* =====================================================
   LANGUAGE TOGGLE BUTTON
===================================================== */

.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border:1px solid rgba(0,217,255,.3);
  border-radius:20px;
  background:rgba(0,217,255,.08);
  color:#00d9ff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  cursor:pointer;
  white-space:nowrap;
  transition:all .3s ease;
  font-family:inherit;
  outline:none;
  flex-shrink:0;
}

.lang-toggle:hover{
  background:rgba(0,217,255,.18);
  border-color:rgba(0,217,255,.55);
  color:#7eeaff;
  transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(0,217,255,.18);
}

.lang-toggle:active{
  transform:translateY(0);
}

.lang-toggle svg{
  width:14px;
  height:14px;
  flex-shrink:0;
}

/* Mobile: show toggle inside dropdown */
@media(max-width:900px){
  .lang-toggle{
    margin-top:8px;
    align-self:flex-start;
  }
}