.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.62) 35%,rgba(5,5,5,.12) 64%,rgba(5,5,5,.18) 100%),
    url("/resources/img/image_pangyo.png") center/cover no-repeat;
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute;
  top:0;right:8%;
  width:23%;
  height:100%;
  background:rgba(244,122,0,.90);
  clip-path:polygon(28% 0,100% 0,72% 100%,0 100%);
  mix-blend-mode:multiply;
  opacity:.72;
}
.hero-lights{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-light{
  position:absolute;
  display:block;
  opacity:0;
  filter:blur(7px);
  mix-blend-mode:screen;
  transform:scale(.92);
  animation:houseLightOn 1.2s cubic-bezier(.18,.72,.22,1) forwards;
}
.light-left-room{
  left:30.2%;
  top:49.5%;
  width:4.2%;
  height:6%;
  background:radial-gradient(ellipse at 50% 42%, rgba(255,214,126,.56), rgba(255,135,28,.13) 42%, transparent 72%);
  animation-delay:1.8s;
}
.light-left-window{
  left:34.8%;
  top:42.6%;
  width:4.4%;
  height:7%;
  background:radial-gradient(ellipse at 45% 46%, rgba(255,222,143,.44), rgba(255,148,44,.10) 42%, transparent 74%);
  animation-delay:2.1s;
}
.light-window-left{
  left:61.4%;
  top:54.4%;
  width:4.8%;
  height:6.2%;
  background:
    radial-gradient(circle at 34% 36%, rgba(255,230,151,.58), transparent 35%),
    linear-gradient(90deg, rgba(255,184,72,.22), rgba(255,126,28,.08));
  animation-delay:2.4s;
}
.light-window-right{
  left:72.4%;
  top:51.8%;
  width:5.2%;
  height:7.4%;
  background:
    radial-gradient(circle at 66% 38%, rgba(255,205,110,.62), transparent 38%),
    linear-gradient(100deg, rgba(255,145,38,.08), rgba(255,174,70,.26));
  animation-delay:2.7s;
}
.light-wall{
  left:84.4%;
  top:52.8%;
  width:3.8%;
  height:8.4%;
  background:radial-gradient(ellipse at 54% 38%, rgba(255,214,128,.62), rgba(255,144,38,.14) 42%, transparent 72%);
  animation-delay:3s;
}
.light-entry{
  left:72.1%;
  top:64.2%;
  width:4.6%;
  height:6.6%;
  background:radial-gradient(ellipse at 50% 24%, rgba(255,196,83,.66), rgba(255,130,22,.14) 44%, transparent 74%);
  animation-delay:3.3s;
}
.hero-content{
  min-height:100vh;
  padding:170px 4vw 95px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  z-index:3;
  max-width:940px;
}
.hero-tag{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.72);
  margin-bottom:22px;
}
.hero-tag::before{
  content:"";
  width:42px;height:4px;
  background:var(--si-orange);
  transform:skewX(-28deg);
}
.hero h1{
  margin:0;
  font-size:clamp(56px,5.8vw,104px);
  line-height:1.07;
  letter-spacing:-.065em;
  font-weight:300;
}
.hero h1 strong{font-weight:800}
.hero h1 span{color:#ff9b46}
.hero-title{
  overflow:hidden;
}
.hero h1 .hero-title-line{
  display:block;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  transform:translateY(34px);
}
.hero h1 .hero-title-line span{
  color:#ff9b46;
}
.hero-title-line:first-child{
  animation:heroTitleBuild .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title-line:nth-child(2){
  animation:heroTitleSoftIn 1.05s cubic-bezier(.19,1,.22,1) .52s forwards;
}
@keyframes heroTitleBuild{
  0%{
    opacity:0;
    transform:translateY(42px);
    filter:blur(6px);
  }
  55%{
    opacity:1;
    filter:blur(0);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
@keyframes heroTitleSoftIn{
  0%{
    opacity:0;
    transform:translateY(24px);
    filter:blur(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
.hero-desc{
  max-width:710px;
  margin:28px 0 34px;
  font-size:16px;
  line-height:1.9;
  color:rgba(255,255,255,.78);
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  font-size:13px;
  font-weight:700;
  position:relative;
  z-index:0;
  transition:transform .22s ease, background-color .22s ease, color .22s ease, filter .22s ease;
}
.btn-orange{
  background:var(--si-orange);
  color:#fff;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
}
.btn-orange:hover,
.btn-orange:focus-visible{
  background:#ff8a16;
  transform:translateY(-3px);
  filter:drop-shadow(0 10px 18px rgba(244,122,0,.28));
}
.btn-dark{
  border:0;
  color:#fff;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  background:transparent;
}
.btn-dark::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpolygon points='8,1 99,1 92,99 1,99' fill='none' stroke='rgba(255,255,255,.72)' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  z-index:1;
}
.btn-dark:hover,
.btn-dark:focus-visible{
  background:rgba(255,255,255,.13);
  transform:translateY(-3px);
}
.btn-dark:hover::before,
.btn-dark:focus-visible::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpolygon points='8,1 99,1 92,99 1,99' fill='none' stroke='rgba(255,255,255,.95)' stroke-width='2.4'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.btn:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:4px;
}
.hero-meta{
  position:absolute;
  z-index:5;
  right:4vw;
  bottom:32px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  color:#fff;
}
.hero-meta div{
  border-left:2px solid var(--si-orange);
  padding-left:13px;
  opacity:0;
  transform:translateY(14px);
  animation:heroMetaIn .75s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-meta div:nth-child(2){animation-delay:.14s}
.hero-meta div:nth-child(3){animation-delay:.28s}
.hero-meta.is-counted strong{
  animation:heroCountPulse .55s ease-out;
}
.hero-meta strong{
  display:block;
  font-size:27px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero-meta span{
  display:block;
  margin-top:8px;
  font-size:10px;
  color:rgba(255,255,255,.62);
  letter-spacing:.08em;
}
.scroll-cue{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:13px;
  letter-spacing:.16em;
  opacity:.86;
}
.scroll-mouse{
  width:28px;
  height:46px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:18px;
  position:relative;
}
.scroll-mouse span{
  position:absolute;
  left:50%;
  top:8px;
  width:4px;
  height:7px;
  border-radius:999px;
  background:#fff;
  transform:translateX(-50%);
  animation:scrollWheel 1.6s ease-in-out infinite;
}
.scroll-arrow{
  width:18px;
  height:18px;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg);
  animation:scrollArrow 1.6s ease-in-out infinite;
}
.scroll-text{
  line-height:1;
}
@keyframes heroMetaIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes scrollWheel{
  0%,100%{
    opacity:.3;
    transform:translate(-50%,0);
  }
  45%{
    opacity:1;
    transform:translate(-50%,10px);
  }
}
@keyframes scrollArrow{
  0%,100%{
    opacity:.35;
    transform:translateY(0) rotate(45deg);
  }
  45%{
    opacity:1;
    transform:translateY(6px) rotate(45deg);
  }
}
@keyframes houseLightOn{
  0%{
    opacity:0;
    filter:blur(12px);
    transform:scale(.88);
  }
  52%{
    opacity:.58;
    filter:blur(6px);
    transform:scale(1.02);
  }
  72%{
    opacity:.38;
  }
  100%{
    opacity:.48;
    filter:blur(5px);
    transform:scale(1);
  }
}
@keyframes heroCountPulse{
  0%{text-shadow:0 0 0 rgba(244,122,0,0)}
  45%{text-shadow:0 0 24px rgba(244,122,0,.75)}
  100%{text-shadow:0 0 0 rgba(244,122,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero-light{
    animation:none;
    opacity:.42;
  }
  .scroll-mouse span,
  .scroll-arrow{
    animation:none;
  }
}


.section{padding:115px 5vw}
.section-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:end;
  margin-bottom:58px;
}
.kicker{
  color:var(--si-orange);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
}
.section h2{
  margin:12px 0 0;
  font-size:clamp(40px,4.3vw,70px);
  line-height:1.18;
  letter-spacing:-.055em;
  font-weight:300;
  word-break:keep-all;
}
.section h2 strong{font-weight:800}
.section-head p{
  max-width:575px;
  margin:0;
  color:var(--si-gray);
  font-size:14px;
  line-height:1.95;
}

.about{background:#fff}
.about-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}
.about-image{
  min-height:560px;
  position:relative;
  overflow:hidden;
  display:grid;
}
.about-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#111;
}
.about-image::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:28%;
  height:100%;
  background:rgba(244,122,0,.92);
  clip-path:polygon(0 0,100% 0,63% 100%,0 100%);
  mix-blend-mode:multiply;
}
.about-image-label{
  position:absolute;
  z-index:2;
  left:clamp(42px,15%,130px);
  top:12%;
  color:#fff;
}
.about-image-label small{
  font-size:10px;
  letter-spacing:.14em;
}
.about-image-label h3{
  margin:8px 0 0;
  font-size:27px;
  font-weight:500;
}
.about-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:18px;
}
.about-card{
  padding:32px;
  border:1px solid var(--si-line);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--si-light);
}
.about-card.dark{
  background:var(--si-black);
  color:#fff;
  border-color:var(--si-black);
}
.about-card .num{
  font-size:52px;
  font-weight:800;
  color:var(--si-orange);
  letter-spacing:-.06em;
}
.about-card h3{
  margin:20px 0 10px;
  font-size:25px;
  line-height:1.45;
  font-weight:500;
}
.about-card p{
  margin:0;
  color:#747474;
  font-size:13px;
  line-height:1.85;
}
.about-card.dark p{color:#929292}

@media(max-width:1180px){
  .about-grid{
    grid-template-columns:1fr;
  }
  .about-image{
    min-height:0;
    aspect-ratio:1691/930;
  }
  .about-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
}

.business{
  background:var(--si-black);
  color:#fff;
}
.business .section-head p{color:#8d8d8d}
.business-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #333;
}
.business-card{
  min-height:340px;
  padding:28px 26px;
  border-right:1px solid #333;
  border-bottom:1px solid #333;
  position:relative;
  overflow:hidden;
  transition:.25s;
}
.business-card:first-child{border-left:1px solid #333}
.business-card::before{
  content:"";
  position:absolute;
  right:-70px;
  top:-20px;
  width:150px;
  height:320px;
  background:var(--si-orange);
  transform:skewX(-12deg);
  opacity:0;
  transition:.25s;
}
.business-card:hover::before{opacity:.95}
.business-card:hover{padding-left:33px}
.business-card > *{position:relative;z-index:2}
.business-no{
  color:var(--si-orange);
  font-size:40px;
  font-weight:800;
}
.business-card:hover .business-no{color:white}
.business-card h3{
  margin:105px 0 14px;
  font-size:26px;
  font-weight:500;
}
.business-card p{
  color:#858585;
  font-size:13px;
  line-height:1.8;
}
.business-card:hover p{color:#fff}
.business-arrow{
  position:absolute;
  right:24px;
  bottom:22px;
  font-size:24px;
  color:#666;
}
.business-card:hover .business-arrow{color:#fff}

.projects{background:var(--si-light)}
.projects-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
}
.project-main,.project-side article{
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.project-main{
  min-height:610px;
  background-image:url("/resources/img/image_pangyo2.png");
}
.project-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:18px;
}
.project-side article:first-child{
  background-image:url("/resources/img/image_orchid1.png")
}
.project-side article:last-child{
  background-image:url("/resources/img/image_perf_dev02.png")
}
.project-main::after,.project-side article::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 46%,rgba(0,0,0,.72));
}
.project-tag{
  position:absolute;
  z-index:2;
  top:0;
  left:24px;
  background:var(--si-orange);
  color:#fff;
  padding:12px 16px;
  font-size:10px;
  font-weight:800;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
}
.project-info{
  position:absolute;
  z-index:2;
  left:26px;
  bottom:25px;
  color:#fff;
}
.project-info h3{
  margin:0;
  font-size:24px;
  font-weight:500;
}
.project-info p{
  margin:8px 0 0;
  color:rgba(255,255,255,.68);
  font-size:11px;
}

.tech{
  background:#fff;
}
.tech-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.tech-visual{
  min-height:540px;
  background:
    linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
    url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=88") center/cover;
  position:relative;
}
.tech-visual::before{
  content:"";
  position:absolute;
  left:-1px;
  top:15%;
  width:35%;
  height:70%;
  background:var(--si-orange);
  clip-path:polygon(0 0,100% 0,65% 100%,0 100%);
}
.tech-copy h2{
  font-size:clamp(40px,4vw,66px);
  line-height:1.2;
  letter-spacing:-.055em;
  font-weight:300;
  margin:12px 0 25px;
}
.tech-copy h2 strong{font-weight:800}
.tech-copy p{
  color:var(--si-gray);
  line-height:1.95;
  font-size:14px;
  max-width:655px;
}
.tech-list{
  margin-top:35px;
  border-top:1px solid var(--si-line);
}
.tech-row{
  display:grid;
  grid-template-columns:75px 1fr auto;
  gap:20px;
  padding:19px 0;
  border-bottom:1px solid var(--si-line);
  align-items:center;
}
.tech-row span{
  color:var(--si-orange);
  font-size:11px;
  font-weight:800;
}
.tech-row b{
  font-size:14px;
  font-weight:600;
}
.tech-row i{
  font-style:normal;
  color:#aaa;
  font-size:19px;
}

.statement{
  padding:95px 5vw;
  background:var(--si-orange);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.statement::before{
  content:"SI";
  position:absolute;
  right:-1vw;
  top:-3vw;
  font-size:280px;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.11);
  transform:skewX(-12deg);
}
.statement blockquote{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0;
  font-size:clamp(40px,4.6vw,74px);
  line-height:1.35;
  letter-spacing:-.055em;
  font-weight:300;
}
.statement blockquote strong{font-weight:800}

.contact{
  background:#fff;
}
.contact-wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
}
.contact h2{
  margin:12px 0 20px;
  font-size:clamp(43px,4.8vw,77px);
  line-height:1.12;
  letter-spacing:-.055em;
  font-weight:300;
}
.contact h2 strong{font-weight:800}
.contact p{
  color:var(--si-gray);
  line-height:1.9;
  font-size:14px;
}
.contact-info{
  border-top:3px solid var(--si-orange);
}
.row{
  display:grid;
  grid-template-columns:120px 1fr;
  padding:18px 0;
  border-bottom:1px solid var(--si-line);
  font-size:12px;
}
.row span{color:#949494}
.row b{font-weight:600}

@media(max-width:1000px){
  .hero-meta{display:none}
  .section-head,.tech-layout,.contact-wrap{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .about-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .business-grid{grid-template-columns:1fr 1fr}
  .projects-grid{grid-template-columns:1fr}
  .project-side{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
  .project-side article{min-height:350px}
}
@media(max-width:640px){
  .hero{
    min-height:100svh;
    background-position:58% center;
  }
  .hero-content{
    min-height:100svh;
    padding:112px 20px 58px;
  }
  .hero h1{
    font-size:42px;
    line-height:1.12;
  }
  .hero h1 .hero-title-line{
    white-space:normal;
  }
  .hero-desc{
    margin:18px 0 24px;
    font-size:13px;
    line-height:1.75;
  }
  .hero::before{
    right:-8%;
    width:36%;
    opacity:.52;
  }
  .light-left-room,
  .light-left-window{
    display:none;
  }
  .light-window-left{
    left:49%;
    top:53%;
    width:10%;
    height:5.8%;
  }
  .light-window-right{
    left:70%;
    top:51%;
    width:11%;
    height:6.8%;
  }
  .light-wall{
    left:90%;
    top:53%;
    width:7%;
    height:8%;
    opacity:.55;
  }
  .light-entry{
    left:71%;
    top:63%;
    width:10%;
    height:6%;
  }
  .hero-actions{
    gap:8px;
  }
  .scroll-cue{
    display:none;
  }
  .btn{
    min-height:44px;
    padding:0 17px;
    font-size:11px;
  }
  .section,.statement{padding:82px 20px}
  .business{padding-left:20px;padding-right:20px}
  .about-side{grid-template-columns:1fr}
  .business-grid{grid-template-columns:1fr}
  .business-card{min-height:270px}
  .project-main{min-height:470px}
  .project-side{display:block}
  .project-side article{min-height:350px;margin-top:14px}
  .tech-visual{min-height:420px}}