:root{
    --navy:#0a1230;
    --navy-2:#101c4a;
    --purple:#8b2ff0;
    --purple-2:#c04ee0;
    --teal:#22d3c5;
    --ink:#0d1130;
    --paper:#f7f8fc;
    --muted:#6b7290;
    --white:#ffffff;
    --radius:18px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
  body{
    margin:0;
    font-family:'Noto Sans KR','Manrope',sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* ---------- Header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 5vw;
    background:rgba(252, 248, 255, 0.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  header .logo{display:flex;align-items:center;gap:10px;}
  header .logo img{height:34px;width:auto;}
  nav{display:flex;gap:32px;}
  nav a{
    color:#000000;font-weight:500;font-size:15px;letter-spacing:0.2px;
    position:relative;padding:4px 0;
  }
  nav a:hover{color:var(--teal);}
  .cta-btn{
    background:linear-gradient(135deg,var(--purple),var(--purple-2));
    color:#fff;font-weight:700;font-size:14px;
    padding:11px 22px;border-radius:999px;
    box-shadow:0 6px 20px rgba(139,47,240,0.35);
    transition:transform .2s ease, box-shadow .2s ease;
    white-space:nowrap;
  }
  .cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(139,47,240,0.45);}
  .nav-toggle{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding:120px 5vw 80px;
    overflow:hidden;
    background:
      radial-gradient(ellipse 80% 60% at 15% 20%, rgba(196,78,224,0.35), transparent 60%),
      radial-gradient(ellipse 70% 60% at 85% 75%, rgba(34,211,197,0.30), transparent 60%),
      linear-gradient(135deg, #0a1230 0%, #131c5c 45%, #1a2470 70%, #0a1230 100%);
  }
  .hero::before{
    content:"";
    position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 90px);
    opacity:.5;
    pointer-events:none;
  }
  .hero-wave{
    position:absolute;inset:0;z-index:0;opacity:0.9;
  }
  .hero-content{position:relative;z-index:2;max-width:900px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--teal);font-weight:700;font-size:13px;letter-spacing:2px;
    text-transform:uppercase;margin-bottom:22px;
  }
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);display:inline-block;}
  .hero h1{
    font-size:clamp(2.1rem, 5.4vw, 4.1rem);
    line-height:1.15;font-weight:800;color:#fff;margin:0 0 22px;
    letter-spacing:-0.5px;
  }
  .hero h1 span{
    background:linear-gradient(90deg,var(--teal),var(--purple-2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p{
    font-size:1.05rem;color:#c6cbe8;max-width:560px;line-height:1.75;margin-bottom:38px;
  }
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
  .btn-ghost{
    border:1.5px solid rgba(255,255,255,0.35);color:#fff;font-weight:600;font-size:14px;
    padding:12px 26px;border-radius:999px;transition:all .2s ease;
  }
  .btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:#fff;}

  .scroll-cue{
    position:absolute;bottom:34px;left:5vw;z-index:2;
    color:#9aa0c8;font-size:12px;display:flex;align-items:center;gap:10px;
  }
  .scroll-cue .line{width:1px;height:34px;background:linear-gradient(#22d3c5,transparent);}

  /* ---------- Page Hero (subpages) ---------- */
  .page-hero{
    position:relative;
    padding:150px 5vw 70px;
    overflow:hidden;
    background:
      radial-gradient(ellipse 80% 60% at 15% 20%, rgba(196,78,224,0.35), transparent 60%),
      radial-gradient(ellipse 70% 60% at 85% 75%, rgba(34,211,197,0.30), transparent 60%),
      linear-gradient(135deg, #0a1230 0%, #131c5c 45%, #1a2470 70%, #0a1230 100%);
  }
  .page-hero h1{
    font-size:clamp(1.9rem, 4.4vw, 3.1rem);
    line-height:1.25;font-weight:800;color:#fff;margin:0 0 18px;
    letter-spacing:-0.5px;
  }
  .page-hero h1 span{
    background:linear-gradient(90deg,var(--teal),var(--purple-2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .page-hero p{font-size:1.02rem;color:#c6cbe8;max-width:600px;line-height:1.75;margin:0;}
  nav a.active{color:var(--purple);}

  /* ---------- Section shell ---------- */
  section{padding:110px 5vw;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-tag{
    color:var(--purple);font-weight:800;font-size:13px;letter-spacing:2px;
    text-transform:uppercase;margin-bottom:14px;display:block;
  }
  .section-head h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;margin:0 0 16px;line-height:1.25;}
  .section-head p{color:var(--muted);font-size:1.02rem;line-height:1.75;margin:0;}

  /* ---------- About / Tech ---------- */
  .about{background:var(--white);}
  .about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start;}
  .about-copy p{color:var(--muted);line-height:1.85;font-size:1.02rem;margin-bottom:18px;}
  .about-copy strong{color:var(--ink);}
  .feature-list{display:flex;flex-direction:column;gap:22px;}
  .feature-item{
    display:flex;gap:18px;padding:24px;border-radius:var(--radius);
    background:linear-gradient(180deg,#faf9ff,#f2f0fc);
    border:1px solid #eceafb;
  }
  .feature-icon{
    flex:none;width:46px;height:46px;border-radius:12px;
    background:linear-gradient(135deg,var(--purple),var(--teal));
    display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px;
  }
  .feature-item h3{margin:0 0 6px;font-size:1.05rem;font-weight:700;}
  .feature-item p{margin:0;color:var(--muted);font-size:0.94rem;line-height:1.6;}

  /* ---------- Products ---------- */
  .products{
    background:var(--navy);
    position:relative;overflow:hidden;
  }
  .products::before{
    content:"";position:absolute;top:-20%;right:-10%;width:60%;height:70%;
    background:radial-gradient(circle,rgba(139,47,240,0.35),transparent 70%);
    filter:blur(10px);
  }
  .products .section-head h2, .products .section-tag{color:#fff;}
  .products .section-tag{color:var(--teal);}
  .products .section-head p{color:#a9aed6;}
  .product-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  }
  .product-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.10);
    border-radius:var(--radius);
    padding:30px 24px;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
  }
  .product-card:hover{
    transform:translateY(-6px);
    border-color:rgba(34,211,197,0.5);
    background:rgba(255,255,255,0.07);
  }
  .product-image{
    position:relative;width:100%;aspect-ratio:4/3;
    border-radius:12px;overflow:hidden;margin-bottom:20px;
    background:var(--white);
  }
  .product-image img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
    padding:20px;box-sizing:border-box;
    transition:opacity .35s ease;
  }
  .product-image .img-hover{opacity:0;}
  .product-card:hover .product-image:not(.no-hover) .img-default{opacity:0;}
  .product-card:hover .product-image:not(.no-hover) .img-hover{opacity:1;}
  .product-card h3{color:#fff;font-size:1.08rem;margin:0 0 10px;font-weight:700;}
  .product-card p{color:#a9aed6;font-size:0.9rem;line-height:1.65;margin:0;}

  /* ---------- Media ---------- */
  .media{background:var(--white);}
  .media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .media-card{
    display:block;border-radius:var(--radius);overflow:hidden;
    border:1px solid #eceafb;background:#faf9ff;text-decoration:none;color:inherit;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .media-card:hover{
    transform:translateY(-6px);
    border-color:rgba(139,47,240,0.4);
    box-shadow:0 16px 30px -18px rgba(28,20,60,0.35);
  }
  .media-thumb{position:relative;width:100%;aspect-ratio:16/9;background:var(--navy);overflow:hidden;}
  .media-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .play-icon{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:48px;height:48px;border-radius:50%;
    background:rgba(20,14,40,0.55);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;padding-left:3px;box-sizing:border-box;
    transition:background .25s ease, transform .25s ease;
  }
  .media-card:hover .play-icon{background:var(--purple);transform:translate(-50%,-50%) scale(1.08);}
  .media-card h3{margin:0;padding:16px 18px;font-size:0.98rem;font-weight:700;color:var(--ink);line-height:1.4;}

  /* ---------- Contact ---------- */
  .contact{background:var(--paper);}
  .contact-panel{
    background:linear-gradient(135deg,#0a1230,#1a2470);
    border-radius:28px;
    padding:64px 5vw;
    display:grid;grid-template-columns:1.2fr 1fr;gap:40px;
    position:relative;overflow:hidden;
  }
  .contact-panel::after{
    content:"";position:absolute;bottom:-30%;left:-10%;width:50%;height:70%;
    background:radial-gradient(circle,rgba(34,211,197,0.28),transparent 70%);
  }
  .contact-left{position:relative;z-index:1;}
  .contact-left .section-tag{color:var(--teal);}
  .contact-left h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin:0 0 18px;}
  .contact-left p{color:#c6cbe8;line-height:1.8;margin:0 0 30px;max-width:440px;}
  .contact-card{
    position:relative;z-index:1;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:var(--radius);
    padding:32px;
    display:flex;flex-direction:column;gap:22px;
  }
  .contact-row{display:flex;gap:14px;align-items:flex-start;}
  .contact-row .ico{
    flex:none;width:36px;height:36px;border-radius:9px;
    background:rgba(139,47,240,0.25);border:1px solid rgba(196,78,224,0.4);
    display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:16px;
  }
  .contact-row .label{color:#8890c0;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}
  .contact-row .value{color:#fff;font-size:0.98rem;line-height:1.6;font-weight:500;}
  .contact-row a.value:hover{color:var(--teal);}

  .contact-form-panel{
    max-width:900px;
    margin:40px auto 0;
    background:var(--white);
    border:1px solid #eceafb;
    border-radius:var(--radius);
    padding:44px;
  }
  .contact-form-panel h3{margin:0 0 8px;font-size:1.3rem;font-weight:800;}
  .contact-form-panel > p{margin:0 0 28px;color:var(--muted);line-height:1.7;}
  .contact-form{display:flex;flex-direction:column;gap:20px;}
  .contact-form .hidden-field{position:absolute;left:-9999px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  .form-group{display:flex;flex-direction:column;gap:8px;}
  .form-group label{font-size:13px;font-weight:700;color:var(--ink);}
  .form-group input,.form-group textarea{
    border:1.5px solid #e2e2f0;border-radius:10px;padding:12px 14px;
    font-family:inherit;font-size:0.95rem;color:var(--ink);
    background:var(--paper);transition:border-color .2s ease;resize:vertical;
  }
  .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--purple);}
  .contact-form button{align-self:flex-start;border:none;cursor:pointer;}
  .form-status{margin:0;font-size:0.9rem;color:var(--teal);min-height:1.2em;}

  /* ---------- Specs (Features page) ---------- */
  .specs{background:var(--white);}
  .spec-block{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
    padding:56px 0;
  }
  .spec-block.reverse .spec-media{order:2;}
  .spec-block.reverse .spec-copy{order:1;}
  .spec-media{
    position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);
    background:linear-gradient(180deg,#faf9ff,#f2f0fc);
    border:1.5px dashed #d8d4f2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;color:var(--muted);font-size:0.88rem;font-weight:600;text-align:center;
    line-height:1.5;padding:20px;
  }
  .spec-media-icon{
    width:52px;height:52px;border-radius:50%;flex:none;
    background:linear-gradient(135deg,var(--purple),var(--teal));
    color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;
  }
  .spec-media-pair{
    background:none;border:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;aspect-ratio:auto;
  }
  .spec-media-half{
    position:relative;aspect-ratio:1/1;border-radius:var(--radius);
    background:linear-gradient(180deg,#faf9ff,#f2f0fc);border:1.5px dashed #d8d4f2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    color:var(--muted);font-size:0.85rem;font-weight:600;text-align:center;line-height:1.5;padding:14px;
  }
  .spec-copy h3{font-size:1.4rem;font-weight:800;margin:0 0 16px;}
  .spec-copy p{color:var(--muted);line-height:1.85;font-size:1rem;margin:0 0 14px;}
  .spec-copy p:last-child{margin-bottom:0;}
  .spec-divider{border:0;border-top:1px solid #eceafb;margin:0;}

  /* ---------- Applications ---------- */
  .applications{background:#eef2ff;}
  .app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .app-card{
    border-radius:var(--radius);overflow:hidden;background:var(--white);
    border:1px solid #e2e8fb;
  }
  .app-media{
    position:relative;width:100%;aspect-ratio:4/3;
    background:linear-gradient(135deg,var(--teal),var(--purple-2));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;font-size:0.95rem;text-align:center;line-height:1.4;padding:16px;
  }
  .app-caption{padding:16px 18px;font-weight:700;font-size:0.98rem;color:var(--ink);margin:0;}
  .app-caption span{display:block;font-weight:500;font-size:0.82rem;color:var(--muted);margin-top:4px;}

  /* ---------- Footer ---------- */
  footer{
    background:var(--navy);
    padding:36px 5vw;
    display:flex;align-items:center;justify-content:space-between;
    border-top:1px solid rgba(255,255,255,0.08);
    flex-wrap:wrap;gap:16px;
  }
  footer .logo img{height:24px;opacity:0.9;}
  footer .copy{color:#7a80ab;font-size:12.5px;}

  /* ---------- Responsive ---------- */
  @media (max-width: 920px){
    nav{position:fixed;top:64px;left:0;right:0;background:#0a1230;flex-direction:column;padding:20px 24px;gap:18px;transform:translateY(-130%);transition:transform .3s ease;border-bottom:1px solid rgba(255,255,255,0.08);}
    nav.open{transform:translateY(0);}
    .nav-toggle{display:block;}
    .about-grid{grid-template-columns:1fr;gap:40px;}
    .product-grid{grid-template-columns:repeat(2,1fr);}
    .media-grid{grid-template-columns:repeat(2,1fr);}
    .contact-panel{grid-template-columns:1fr;}
  }
  @media (max-width: 560px){
    section{padding:80px 6vw;}
    .product-grid{grid-template-columns:1fr;}
    .media-grid{grid-template-columns:1fr;}
    .hero{padding-top:110px;}
    .contact-form-panel{padding:28px;}
    .form-row{grid-template-columns:1fr;}
  }