:root { --black:#0b0c0e; --graphite:#181a1e; --white:#f5f4f1; --muted:#a4a7aa; --red:#e40018; --line:rgba(255,255,255,.18); }
* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; margin:0; } body { overflow:hidden; background:var(--black); color:var(--white); font-family:"Noto Sans KR",sans-serif; }
.page { isolation:isolate; min-height:100svh; overflow:hidden; position:relative; display:grid; grid-template-rows:auto 1fr auto auto; padding:clamp(23px,3.4vw,60px) clamp(24px,6vw,108px) clamp(18px,2.2vw,38px); background:radial-gradient(circle at 77% 54%,#272a2f 0%,#17191d 25%,transparent 49%), radial-gradient(circle at 5% 105%,#351014 0%,transparent 33%), linear-gradient(125deg,#101114 0%,#0b0c0e 52%,#131419 100%); }
.page::before { content:""; position:absolute; z-index:-2; inset:0; opacity:.34; background:repeating-linear-gradient(108deg,transparent 0 62px,rgba(255,255,255,.035) 63px 64px,transparent 65px 124px); mask-image:linear-gradient(90deg,#000,transparent 72%); }
.grain { position:absolute; pointer-events:none; z-index:4; inset:-30%; opacity:.075; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.orb { position:absolute; z-index:-1; width:38vw; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.18; }.orb-one { background:#8d0714; right:-20vw; top:-24vw; }.orb-two { background:#3d050c; left:-24vw; bottom:-30vw; }
header { min-height:47px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); animation:fade .9s ease both; }.raon-logo { width:clamp(105px,8.4vw,142px); aspect-ratio:211 / 51; position:relative; display:block; }.raon-logo > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; filter:brightness(0) invert(1); }.raon-logo > .raon-orange { filter:none; clip-path:polygon(21% 0,47% 0,47% 100%,21% 100%); } header > img:last-child { width:clamp(126px,10vw,170px); height:auto; display:block; filter:brightness(1.15); }
.hero { position:relative; display:grid; grid-template-columns:1.07fr .93fr; align-items:center; gap:clamp(30px,5vw,96px); min-height:0; }.copy { position:relative; z-index:2; padding:clamp(48px,8vh,112px) 0 clamp(30px,5vh,70px); animation:rise 1.05s .26s cubic-bezier(.16,1,.3,1) both; }
h1 { margin:0; font-size:clamp(42px,5.1vw,83px); line-height:1.19; letter-spacing:-.08em; font-weight:600; } .mobile-title { display:none; } h1 strong { position:relative; font-weight:600; z-index:0; } h1 strong::after { content:""; position:absolute; z-index:-1; left:0; right:-1%; bottom:.06em; height:.13em; background:var(--red); transform:skewX(-26deg); transform-origin:left; animation:marker 1.1s .95s cubic-bezier(.16,1,.3,1) both; }
.description { margin:clamp(38px,5vw,70px) 0 0 clamp(0px,5vw,84px); color:#c1c3c5; font-size:clamp(14px,1.05vw,17px); line-height:1.9; letter-spacing:-.04em; }
.product { position:relative; align-self:stretch; min-height:340px; animation:product-fade 3s .45s ease-out both; }.product::before { content:""; position:absolute; z-index:1; inset:14% 2% 12%; border:1px solid rgba(255,255,255,.14); border-radius:50%; transform:rotate(-13deg); }.product::after { content:""; pointer-events:none; position:absolute; z-index:3; inset:-2px; background:radial-gradient(ellipse 86% 92% at 60% 52%,transparent 70%,rgba(11,12,14,.18) 100%); }.product-glow { position:absolute; z-index:1; width:52%; aspect-ratio:1; border-radius:50%; right:10%; top:24%; background:#c3081b; filter:blur(80px); opacity:.3; }.product img { position:absolute; width:125%; max-width:none; height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 35px 35px rgba(0,0,0,.62)); transform:translateX(-5%) scale(1.01); opacity:1; mask-image:radial-gradient(ellipse 87% 94% at 60% 51%,#000 72%,rgba(0,0,0,.72) 88%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 87% 94% at 60% 51%,#000 72%,rgba(0,0,0,.72) 88%,transparent 100%); animation:camera-zoom 34s 3.4s ease-in-out infinite alternate; }
.contact { position:relative; z-index:3; display:flex; justify-content:space-between; align-items:end; gap:30px; padding:17px 0 19px; border-top:1px solid var(--line); animation:rise .9s .66s cubic-bezier(.16,1,.3,1) both; }.contact > p { margin:0; color:#aaadb0; font-size:12px; line-height:1.8; letter-spacing:-.04em; }.links { display:flex; align-items:center; gap:18px; white-space:nowrap; font-size:clamp(15px,1.1vw,18px); font-weight:600; letter-spacing:-.05em; }.links a { color:var(--white); text-decoration:none; position:relative; padding:4px 0; transition:transform .3s ease,color .3s ease; }.links a:last-child { color:#fb5867; }.links a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s ease; }.links a:hover { transform:translateY(-3px); }.links a:hover::after { transform:scaleX(1); transform-origin:left; }.links i { width:1px; height:14px; background:#6e7175; }
footer { padding-top:15px; border-top:1px solid rgba(255,255,255,.1); text-align:right; color:#686b6f; font:9px "DM Mono",monospace; letter-spacing:.06em; animation:fade .9s .8s both; }
@keyframes fade { from { opacity:0; } to { opacity:1; } } @keyframes rise { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:translateY(0); } } @keyframes product-fade { from { opacity:0; filter:blur(10px); } to { opacity:1; filter:blur(0); } } @keyframes camera-zoom { from { transform:translateX(-5%) scale(1.01); } to { transform:translateX(-5.5%) scale(1.045); } } @keyframes marker { from { transform:skewX(-26deg) scaleX(0); } to { transform:skewX(-26deg) scaleX(1); } }
@media (max-width:760px) { .page { padding:20px 22px 18px; }.page::before { mask-image:none; opacity:.2; }.orb { width:85vw; }.orb-one { right:-45vw; top:20%; }.hero { grid-template-columns:1fr; gap:0; }.copy { align-self:end; padding:36px 0 4px; } h1 { font-size:clamp(34px,10.3vw,41px); line-height:1.22; }.desktop-title { display:none; }.mobile-title { display:inline; }.description { margin:30px 0 0; max-width:320px; font-size:12px; line-height:1.8; }.product { position:absolute; z-index:1; width:88%; height:42%; min-height:0; right:-22%; bottom:12%; opacity:.58; }.product::before { inset:9% 0 15%; }.contact { display:block; padding:13px 0 15px; }.contact > p { max-width:290px; font-size:10.5px; line-height:1.72; }.links { margin-top:13px; gap:11px; font-size:13px; } footer { padding-top:13px; font-size:8px; } header > img:last-child { width:124px; }.raon-logo { width:103px; } }
@media (max-height:720px) and (min-width:761px) { .copy { padding:34px 0; } h1 { font-size:clamp(40px,4.4vw,66px); }.description { margin-top:25px; }.categories { margin-top:17px; }.contact { padding:12px 0; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }