:root{
  --ink:#0A0F1B;
  --ink2:#111827;
  --blue:#2563EB;
  --sky:#38BDF8;
  --yellow:#FFD600;
  --text:#334155;
  --muted:#667085;
  --line:#E7EAF0;
  --paper:#FBFCFE;
  --white:#FFFFFF;
  --soft-blue:#EEF5FF;
  --max:1120px;
}

/* =========================
   RESET / BASE
========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

button,
input,
textarea{
  font:inherit;
}

.wrap{
  width:min(calc(100% - 96px),var(--max));
  margin:0 auto;
}


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

header{
  position:sticky;
  top:0;
  z-index:50;

  background:rgba(251,252,254,.92);
  backdrop-filter:blur(18px);

  border-top:5px solid var(--ink);
  border-bottom:1px solid rgba(231,234,240,.9);
}

nav{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;

  font-weight:850;
  letter-spacing:.14em;
  font-size:15px;
}

.brand img{
  width:38px;
  height:38px;
  object-fit:contain;
}

.navlinks{
  display:flex;
  align-items:center;
  gap:34px;

  font-size:15px;
  color:var(--text);
}

.navlinks a{
  transition:color .18s ease;
}

.navlinks a:hover{
  color:var(--blue);
}

.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:1px solid var(--line);
  border-radius:50%;

  background:rgba(255,255,255,.92);
  color:var(--ink);

  box-shadow:0 8px 24px rgba(10,15,27,.08);

  font-size:20px;
  font-weight:800;

  z-index:60;

  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease;
}

.back-to-top:hover{
  transform:translateY(-2px);
  background:var(--ink);
  color:white;
}

/* =========================
   HOME HERO
========================= */

.hero{
  min-height:720px;

  display:grid;
  grid-template-columns:
    minmax(0,1.08fr)
    minmax(320px,.92fr);

  gap:56px;
  align-items:center;

  padding:92px 0 104px;
}

.eyebrow,
.page-kicker{
  color:var(--blue);
  text-transform:uppercase;

  font-size:13px;
  font-weight:850;
  letter-spacing:.2em;
}

.hero h1{
  margin:18px 0 34px;

  font-size:clamp(68px,8vw,118px);
  line-height:.91;
  letter-spacing:-.065em;
}

.lede{
  max-width:730px;
  margin:0;

  color:var(--text);

  font-size:clamp(20px,2vw,26px);
  line-height:1.5;
}

.lede strong{
  color:var(--ink);
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:9px;

  margin-top:36px;
  padding-bottom:5px;

  font-weight:800;

  border-bottom:2px solid var(--ink);
}

.hero-art{
  position:relative;

  min-height:470px;

  display:grid;
  place-items:center;
}

.hero-art::before{
  content:"";

  position:absolute;
  z-index:-1;

  width:min(430px,90%);
  aspect-ratio:1;

  background:var(--soft-blue);
  border-radius:50%;
}

.hero-art img{
  width:min(365px,82%);

  filter:drop-shadow(
    0 26px 28px rgba(10,15,27,.12)
  );

  animation:float 5.5s ease-in-out infinite;
}

@keyframes float{
  50%{
    transform:translateY(-10px);
  }
}


/* =========================
   GENERAL SECTIONS
========================= */

main > section{
  border-top:1px solid var(--line);
  padding:112px 0;
}

.section-grid{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:56px;
}

h2{
  margin:0 0 28px;

  font-size:clamp(42px,5vw,68px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.big-copy{
  max-width:740px;

  color:var(--text);

  font-size:clamp(21px,2.4vw,30px);
  line-height:1.5;
}

.big-copy strong{
  color:var(--ink);
}


/* =========================
   PHILOSOPHY
========================= */

.philosophy{
  background:var(--ink);
  color:white;
}

.philosophy .eyebrow{
  color:var(--sky);
}

.philosophy .big-copy{
  color:#CDD5E1;
}

.philosophy .big-copy strong{
  color:white;
}

.philosophy .big-copy em{
  color:white;
  font-style:normal;
}


/* =========================
   PRODUCTS
========================= */

.products-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,420px);
  gap:56px;
  align-items:end;
}

.products-head p{
  max-width:520px;
  margin:0 0 8px;

  color:var(--muted);
  font-size:17px;
}

.products{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;

  margin-top:54px;
}

.card{
  position:relative;

  min-height:390px;
  padding:30px;

  border:1px solid var(--line);
  border-radius:26px;

  background:white;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.card::after{
  content:"";

  position:absolute;

  width:86px;
  height:86px;

  right:-28px;
  top:-28px;

  border-radius:50%;
  background:var(--soft-blue);
}

.card:nth-child(3)::after{
  background:#FFF7C7;
}

.card:hover{
  transform:translateY(-4px);

  box-shadow:
    0 18px 55px rgba(10,15,27,.07);
}

.featured-card{
  border-color:#D8E5FF;
}

.badge{
  align-self:flex-start;

  padding:6px 10px;
  margin-bottom:20px;

  border-radius:999px;

  background:#F2F4F7;
  color:#475467;

  font-size:12px;
  font-weight:800;
}

.badge.live{
  background:#EAFBF1;
  color:#16794A;
}

.product-top{
  display:flex;
  align-items:center;
  gap:16px;

  margin-bottom:18px;
}

.app-icon{
  width:68px;
  height:68px;

  border-radius:16px;
  object-fit:cover;

  flex:0 0 auto;

  box-shadow:
    0 8px 24px rgba(10,15,27,.10);
}

.product-title-wrap h3{
  margin:0 0 4px;

  font-size:29px;
  letter-spacing:-.03em;
}

.product-title-wrap .tag{
  margin:0;

  color:var(--blue);
  font-weight:750;
}

.card p{
  color:var(--muted);
  margin:0 0 16px;
}

.card p:last-of-type{
  margin-bottom:0;
}

.platforms{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:20px;
}

.platform{
  display:inline-flex;
  align-items:center;

  min-height:28px;
  padding:5px 9px;

  border:1px solid #E4E7EC;
  border-radius:999px;

  background:#F8FAFC;
  color:#475467;

  font-size:12px;
  font-weight:700;
}

.product-actions{
  margin-top:auto;
  padding-top:28px;

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

  gap:14px;
}

.product-actions.appstore-action{
  justify-content:center;
}

.app-store-badge{
  display:block;
  width:150px;
  height:auto;
}

.coming-soon{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;

  color:#667085;

  text-transform:uppercase;
}


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

.about-copy{
  max-width:740px;

  color:var(--text);

  font-size:20px;
  line-height:1.65;
}

.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;

  margin-top:58px;
}

.principle{
  border-top:2px solid var(--ink);
  padding-top:18px;
}

.principle b{
  display:block;

  margin-bottom:8px;

  font-size:18px;
}

.principle span{
  color:var(--muted);
}

.brand-lockup{
  margin-top:56px;
  padding:24px 0 0;

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

  border:0;
  background:transparent;
}

.brand-lockup img{
  width:min(500px,68%);
  height:auto;
}

/* =========================
   CONTACT PAGE
========================= */

.contact-page{
  padding:64px 0 92px;
}

.contact-page section{
  border:0;
  padding:0;
}

.contact-page section::before,
.contact-page section::after{
  content:none;
  display:none;
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
  gap:72px;
  align-items:start;
}

.page-kicker{
  color:var(--blue);
  text-transform:uppercase;
  font-size:12px;
  font-weight:850;
  letter-spacing:.2em;
  margin-bottom:18px;
}

.page-title{
  margin:0;
  max-width:480px;

  font-size:clamp(40px,4vw,56px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:720;
}

.page-intro{
  max-width:460px;
  margin:24px 0 0;

  color:var(--text);

  font-size:18px;
  line-height:1.6;
}

.tiny-note{
  max-width:430px;
  margin-top:26px;

  color:var(--muted);

  font-size:13px;
  line-height:1.6;
}


/* FORM */

.contact-form{
  background:#fff;

  border:1px solid var(--line);
  border-radius:24px;

  padding:28px;

  box-shadow:
    0 14px 45px rgba(10,15,27,.04);
}

.field{
  margin-bottom:16px;
}

.field label{
  display:block;

  margin-bottom:6px;

  color:var(--ink);

  font-size:13px;
  font-weight:800;
}

.field input,
.field textarea{
  width:100%;

  border:1px solid #DDE3EA;
  border-radius:13px;

  background:#FBFCFE;
  color:var(--ink);

  padding:12px 14px;

  font:inherit;
  font-size:15px;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.field input{
  min-height:48px;
}

.field textarea{
  min-height:130px;
  resize:vertical;
}

.field input::placeholder,
.field textarea::placeholder{
  color:#98A2B3;
}

.field input:focus,
.field textarea:focus{
  outline:none;

  border-color:var(--sky);

  background:#fff;

  box-shadow:
    0 0 0 4px rgba(56,189,248,.12);
}


/* FORM BOTTOM */

.form-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  margin-top:4px;
}

.form-privacy{
  max-width:260px;

  color:var(--muted);

  font-size:12px;
  line-height:1.45;
}

.send-button{
  appearance:none;

  min-height:44px;
  padding:0 20px;

  border:0;
  border-radius:999px;

  background:var(--ink);
  color:#fff;

  font:inherit;
  font-size:14px;
  font-weight:800;

  cursor:pointer;
  white-space:nowrap;

  transition:
    transform .18s ease,
    background .18s ease;
}

.send-button:hover{
  transform:translateY(-2px);
  background:var(--blue);
}

.send-button:focus-visible{
  outline:3px solid var(--sky);
  outline-offset:4px;
}

.form-status{
  display:none;

  margin-top:14px;
  padding:10px 12px;

  border-radius:11px;

  background:#FFF8D9;
  color:#6B5700;

  font-size:12px;
  line-height:1.5;
}


/* TABLET */

@media(max-width:900px){

  .contact-layout{
    grid-template-columns:1fr;
    gap:42px;
  }

  .page-title,
  .page-intro{
    max-width:650px;
  }
}


/* MOBILE */

@media(max-width:560px){

  .contact-page{
    padding:56px 0 80px;
  }

  .page-title{
    font-size:clamp(38px,12vw,50px);
  }

  .contact-form{
    padding:22px;
    border-radius:20px;
  }

  .form-bottom{
    flex-direction:column;
    align-items:flex-start;
  }

  .send-button{
    width:100%;
  }
}

/* =========================
   PRIVACY PAGE
========================= */

.privacy-page{
  padding:88px 0 120px;
}

.privacy-copy{
  max-width:760px;
  margin-top:58px;
}

.privacy-copy section{
  border:0;
  padding:0;

  margin:0 0 42px;
}

.privacy-copy h2{
  margin:0 0 12px;

  font-size:21px;
  line-height:1.25;
  letter-spacing:-.02em;

  font-weight:760;
}

.privacy-copy p{
  margin:0;

  color:var(--text);

  font-size:16.5px;
  line-height:1.75;
}

.privacy-copy a{
  color:var(--blue);
  font-weight:750;
}

.updated{
  margin-top:20px;

  color:var(--muted);

  font-size:14px;
}

.privacy-note{
  max-width:720px;

  margin-top:54px;
  padding-top:22px;

  border-top:1px solid var(--line);

  color:var(--muted);

  font-size:14px;
  line-height:1.65;
}


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

footer{
  padding:66px 0;

  background:var(--ink);
  color:white;
}

.foot{
  display:flex;
  justify-content:space-between;
  align-items:end;

  gap:40px;
}

.foot-brand{
  font-size:18px;
  font-weight:850;
  letter-spacing:.16em;
}

.foot-tag{
  margin-top:8px;

  color:var(--sky);
}

.footlinks{
  display:flex;
  flex-wrap:wrap;

  gap:24px;

  color:#D0D5DD;

  font-size:14px;
}

.footlinks a:hover{
  color:white;
}

.legal{
  margin-top:28px;

  color:#98A2B3;

  font-size:13px;
}


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

@media(max-width:900px){

  .wrap{
    width:min(calc(100% - 48px),var(--max));
  }

  .hero{
    grid-template-columns:1fr;
    gap:26px;

    padding:68px 0 78px;
  }

  .hero-art{
    min-height:330px;
  }

  .hero-art::before{
    width:290px;
  }

  .section-grid,
  .products-head,
  .contact-layout{
    grid-template-columns:1fr;
    gap:32px;
  }

  .products{
    grid-template-columns:1fr;
  }

  .principles{
    grid-template-columns:1fr;
  }

  main > section{
    padding:82px 0;
  }

  .page-title{
    max-width:650px;
  }

  .page-intro{
    max-width:650px;
  }

  .foot{
    flex-direction:column;
    align-items:flex-start;
  }
}


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

@media(max-width:560px){

  .wrap{
    width:calc(100% - 32px);
  }

  nav{
    height:68px;
  }

  .brand img{
    width:34px;
    height:34px;
  }

  .navlinks{
    gap:18px;
    font-size:14px;
  }

  .navlinks a:not(:last-child){
    display:none;
  }

  .hero h1{
    font-size:clamp(58px,18vw,80px);
  }

  .app-icon{
    width:60px;
    height:60px;

    border-radius:14px;
  }

  .contact-page,
  .privacy-page{
    padding:72px 0 96px;
  }

  .page-title{
    font-size:clamp(38px,12vw,52px);
  }

  .contact-form{
    padding:24px;

    border-radius:22px;
  }

  .form-bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .send-button{
    width:100%;
  }
}


/* =========================
   REDUCED MOTION
========================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .hero-art img{
    animation:none;
  }

  .card,
  .send-button{
    transition:none;
  }
}





/* =========================================
   MOBILE FIXES — HOME
========================================= */

@media (max-width: 700px){

  .wrap{
    width:calc(100% - 32px);
  }

  header{
    border-top-width:4px;
  }

  nav{
    height:68px;
  }

  .brand{
    gap:10px;
    font-size:14px;
    letter-spacing:.12em;
  }

  .brand img{
    width:34px;
    height:34px;
  }

  .navlinks{
    gap:18px;
    font-size:14px;
  }

  /* 모바일에서는 Products / About 숨기고 Contact만 유지 */
  .navlinks a[href="#products"],
  .navlinks a[href="#about"],
  .navlinks a[href="index.html#products"],
  .navlinks a[href="index.html#about"]{
    display:none;
  }


  /* HERO */
  .hero{
    min-height:auto;

    display:flex;
    flex-direction:column;

    gap:40px;

    padding:64px 0 72px;
  }

  .hero > div:first-child{
    width:100%;
  }

  .eyebrow{
    font-size:11px;
    line-height:1.5;
    letter-spacing:.18em;
  }

  .hero h1{
    margin:18px 0 26px;

    font-size:clamp(54px,17vw,76px);
    line-height:.92;
    letter-spacing:-.06em;

    max-width:100%;
  }

  .lede{
    max-width:100%;

    font-size:19px;
    line-height:1.55;

    word-break:normal;
    overflow-wrap:normal;
  }

  .lede strong{
    display:inline;
    font-size:21px;
    line-height:1.45;
  }

  .cta{
    margin-top:28px;
    font-size:15px;
  }


  /* HERO IMAGE */
  .hero-art{
    width:100%;
    min-height:300px;

    margin-top:0;
  }

  .hero-art::before{
    width:min(290px,78vw);
  }

  .hero-art img{
    width:min(230px,62vw);
  }


  /* GENERAL SECTIONS */
  main > section{
    padding:72px 0;
  }

  .section-grid{
    display:block;
  }

  .section-grid > .eyebrow{
    margin-bottom:24px;
  }

  h2{
    font-size:clamp(38px,11vw,52px);
    line-height:1.03;
    margin-bottom:24px;
  }

  .big-copy{
    max-width:100%;

    font-size:19px;
    line-height:1.6;
  }


  /* PRODUCTS */
  .products-head{
    display:block;
  }

  .products-head p{
    margin-top:20px;
    font-size:16px;
    line-height:1.6;
  }

  .products{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:38px;
  }

  .card{
    min-height:auto;
    padding:24px;
  }

  .product-top{
    align-items:flex-start;
  }

  .app-icon{
    width:58px;
    height:58px;
  }

  .product-title-wrap h3{
    font-size:25px;
  }

  .product-title-wrap .tag{
    font-size:15px;
    line-height:1.4;
  }

  .card p{
    font-size:15.5px;
    line-height:1.65;
  }


  /* ABOUT */
  .about-copy{
    max-width:100%;

    font-size:18px;
    line-height:1.65;
  }

  .principles{
    grid-template-columns:1fr;
    gap:28px;

    margin-top:42px;
  }

  .brand-lockup{
    margin-top:48px;
    padding:20px 0 0;
  }

  .brand-lockup img{
    width:min(420px,88%);
  }


  /* FOOTER */
  footer{
    padding:48px 0;
  }

  .foot{
    gap:28px;
  }

  .footlinks{
    gap:16px;
  }

  .legal{
    margin-top:22px;
    line-height:1.5;
  }


  /* BACK TO TOP */
  .back-to-top{
    right:16px;
    bottom:16px;

    width:40px;
    height:40px;
  }
}