*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;color:#f5f5f7;font-family:Inter,"PingFang SC",sans-serif}
html,
body{

width:100%;

min-height:100%;

overflow-x:hidden;

overflow-y:auto;

}


body{

background:
radial-gradient(circle at 20% 20%,#252936,transparent 40%),
radial-gradient(circle at 80% 40%,#171b2d,transparent 35%),
#050505;

font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI";

}

.hero-layout{

width:85%;

max-width:1400px;

display:flex;

align-items:center;

justify-content:space-between;

position:relative;

z-index:3;

}


.hero-text{

text-align:left;

}


.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 28px;
}


.hero-buttons a,
.hero-buttons button {

    width: 230px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,0.95);

    font-size: 22px;
    font-weight: 500;
    letter-spacing: 1px;

    border-radius: 999px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.22),
        rgba(255,255,255,0.06)
    );

    border: 1px solid rgba(255,255,255,0.3);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);


    box-shadow:
    0 15px 50px rgba(0,0,0,0.4),
    inset 0 0 25px rgba(255,255,255,0.1);

    transition: all .35s ease;
}


.hero-buttons a:hover,
.hero-buttons button:hover {

    transform: translateY(-6px) scale(1.03);

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.4),
        rgba(255,255,255,0.12)
    );

    box-shadow:
    0 20px 70px rgba(255,255,255,0.18),
    inset 0 0 30px rgba(255,255,255,0.2);
}
.hero-buttons a,
.hero-buttons button {
    position: relative;
    overflow: hidden;
}


/* 流光层 */
.hero-buttons a::before,
.hero-buttons button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.45),
        transparent
    );

    transform: skewX(-25deg);

    transition: .8s;
}


/* 自动循环扫光 */
.hero-buttons a:hover::before,
.hero-buttons button:hover::before {

    left: 150%;
}


/* 常驻微弱呼吸光 */
.hero-buttons a,
.hero-buttons button {

    animation: buttonGlow 4s infinite ease-in-out;
}


@keyframes buttonGlow {

    0%,100% {

        box-shadow:
        0 15px 50px rgba(0,0,0,.4),
        inset 0 0 25px rgba(255,255,255,.08);

    }


    50% {

        box-shadow:
        0 15px 60px rgba(255,255,255,.15),
        inset 0 0 35px rgba(255,255,255,.18);

    }

}



.button{

display:inline-flex;

justify-content:center;

align-items:center;

min-width:180px;

}
.nav{height:64px;position:fixed;top:15px;left:5%;right:5%;z-index:20;padding:0 28px;border-radius:20px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between}
.logo{font-size:24px;font-weight:700}
.menu a{color:#aaa;text-decoration:none;margin-left:30px}
.hamburger{display:none;font-size:32px;cursor:pointer}
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #000;
}

/* 液态玻璃背景 */

.glass-bg{

position:fixed;
width:100vw;
height:100vh;
overflow-x:hidden;

inset:-30%;

background:

radial-gradient(
circle at 20% 20%,
rgba(255,255,255,.35),
transparent 35%
),

radial-gradient(
circle at 80% 30%,
rgba(120,160,255,.25),
transparent 40%
),

radial-gradient(
circle at 50% 80%,
rgba(255,255,255,.2),
transparent 35%
);


filter:

blur(80px);


animation:

liquid 5s infinite alternate;


}



@keyframes liquid{


0%{

transform:
translate(-5%,0)
scale(1);

}


100%{

transform:
translate(20%,20%)
scale(1.2);

}


}





/* 内容 */

.hero-content{


position:relative;

z-index:3;

}




.hero h1{
font-family:'Playfair Display',serif;

font-size:
clamp(60px,10vw,120px);

letter-spacing:-2px;

}



.hero h1 span{

display:block;

opacity:0;

animation:

textIn 1s forwards;

}


.hero h1 span:nth-child(1){

animation-delay:.2s;

}


.hero h1 span:nth-child(2){

animation-delay:.5s;

}


.hero h1 span:nth-child(3){

animation-delay:.8s;

}




@keyframes textIn{


from{

opacity:0;

transform:
translateY(50px);

}


to{

opacity:1;

transform:
translateY(0);

}


}





/* R 标志 */


.r-logo{


position:absolute;

    top: calc(50%  120px);
    transform: translate(-50%, -50%)

bottom:-18%;

filter: brightness(0) invert(1);

font-size:

70vw;


font-weight:

900;


line-height:1;


color:white;


opacity:.08;


z-index:1;


animation:

heartbeat 2s infinite;
filter:
brightness(0)
invert(1)
drop-shadow(0 0 30px rgba(255,255,255,.35))
drop-shadow(0 0 80px rgba(255,255,255,.15));


}







@keyframes heartbeat{


0%,100%{

transform:scale(1);

opacity:.08;

}


10%{

transform:scale(1.03);

opacity:.20;

}


20%{

transform:scale(1);

opacity:.08;

}


30%{

transform:scale(1.06);

opacity:.60;

}


40%{

transform:scale(1);

opacity:.08;

}


}
.button{
background:white;
color:black;
padding:15px 35px;
border-radius:50px;
text-decoration:none;
margin:0 8px;
}
.photo-header{text-align:center;padding-top:150px}
.photo-header h1{font-size:80px}
.photo-header p{color:#999;margin-top:20px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:70px 8%}
.photo-item{

border-radius:25px;

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

backdrop-filter:blur(20px);

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

}
.photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:25px}
.info{padding:22px}
.info h3{font-size:26px}
.info p{color:#999;line-height:1.7;margin-top:8px}
.photo-header,
.gallery,
footer{
    position:relative;
    z-index:2;
}
footer{text-align:center;padding:50px;color:#666}

@media(max-width:768px){
.nav{
    left:20px;
    right:20px;
    height:60px;
    top:40px;
}
.menu{position:absolute;top:75px;left:0;right:0;padding:20px;border-radius:22px;background:rgba(30,30,30,.9);backdrop-filter:blur(10px);display:none;flex-direction:column}
.menu.active{display:flex}
.menu a{margin:15px 0;color:white}
.hamburger{display:block}
.photo-header{padding-top:140px}
.photo-header h1{font-size:48px;letter-spacing:-2px}
.gallery{display:block;padding:50px 20px}
.photo-item{margin-bottom:35px;border-radius:26px}
.info h3{font-size:24px}
}
.reveal{
opacity:0;
transform:translateY(40px);
transition:0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

.photo{
cursor:pointer;
}

.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.92);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}

.lightbox.show{
display:flex;
}

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:20px;
}

.close{
position:absolute;
right:30px;
top:20px;
font-size:50px;
color:white;
cursor:pointer;
}

.prev,.next{
position:absolute;
background:none;
border:0;
color:white;
font-size:60px;
cursor:pointer;
}

.prev{left:30px}
.next{right:30px}

@media(max-width:768px){
.lightbox img{
max-width:95%;
}
}
@media(max-width:768px){


.hero{

min-height:60svh;

padding-top:0px;

}



.hero h1{

font-size:60px;

letter-spacing:-3px;

}







.hero p{

font-size:16px;

line-height:1;

margin:25px 0;

}



.button{
min-width:100px;

padding:20px 14px;

font-size:16px;

}



.r-logo{
width:540px;
max-width:none;
opacity:.07;
color:white;
top:calc(50% - 360px);
}
.nav{
    top:10px !important;
}
.hero-layout {
    width: 85%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}
.hero-text{

text-align:center;

}


.hero-buttons{

flex-direction:row;

gap:0px;

}

}



/* Apple / Nothing 风格 ECG 光线 */
.pulse-line{
position:absolute;
width:100%;
height:200px;
left:0;
top:63%;
transform:translateY(-50%);
z-index:1;
pointer-events:none;
opacity:.45;
}

.pulse-line polyline{
    fill:none;

    stroke:#ff5a5a;
    stroke-width:8;

    stroke-linecap:round;
    stroke-linejoin:round;

    filter:
    drop-shadow(0 0 8px rgba(255,90,90,.7))
    drop-shadow(0 0 35px rgba(255,0,0,.35));

    stroke-dasharray:2000;
    stroke-dashoffset:2000;

    animation:
    pulseScan 4s linear infinite,
    pulseGlow 2s infinite;
}
@keyframes pulseGlow{

0%,100%{
    opacity:.25;
    filter:
    drop-shadow(0 0 5px rgba(255,90,90,.4))
    drop-shadow(0 0 20px rgba(255,0,0,.2));
}


10%{
    opacity:.8;
}


30%{
    opacity:.35;
}


50%{
    opacity:1;
    filter:
    drop-shadow(0 0 15px rgba(255,90,90,.9))
    drop-shadow(0 0 50px rgba(255,0,0,.5));
}


70%{
    opacity:.35;
}

}
@keyframes pulseScan{
from{
stroke-dashoffset:2000;
}
to{
stroke-dashoffset:0;

}
}

.r-logo{
z-index:0;
}

.hero-layout{
z-index:3;
}
@media (max-width: 768px) {

    .hero-buttons a,
    .hero-buttons button {

        width: 150px;
        height: 52px;

        font-size: 18px;

        border-radius: 999px;

    }


    .hero-buttons {
        gap: 10px;
    }

}
.timeline{

position:relative;

width:100%;

max-width:1100px;

margin:auto;

padding-top:160px;

padding-bottom:200px;

min-height:150vh;

}

.line{

position:absolute;

left:50%;

top:0;

width:2px;

height:100%;

background:
linear-gradient(
transparent,
rgba(255,255,255,.5),
transparent
);

}



.timeline-item{

width:50%;

padding:40px;

position:relative;

box-sizing:border-box;

}



.timeline-item.left{

left:0;

text-align:right;

}


.timeline-item.right{

left:50%;

}



.time{

font-size:50px;

font-weight:700;

color:white;

margin-bottom:20px;

}



.card{


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

backdrop-filter:blur(30px);

border-radius:30px;

padding:20px;

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

transition:.4s;


}



.card:hover{

transform:
translateY(-10px);

}



.card img{

width:100%;

border-radius:20px;

}



.card h2{

color:white;

font-size:28px;

}



.card p{

color:#aaa;

}
@media(max-width:768px){


.timeline{

margin-top:80px;

}


.line{

left:20px;

}


.timeline-item,
.timeline-item.left,
.timeline-item.right{


width:100%;

left:0;

padding-left:60px;

text-align:left;

}



.time{

font-size:36px;

}


}