:root{
    --ink:#0F1320;
    --ink-soft:#1A2032;
    --paper:#FFFFFF;
    --bone:#F4F3EE;
    --line:#E3E1D8;
    --line-dark:#2A3145;
    --mute:#6B7280;
    --mute-light:#9AA0AC;
    --o:#2B4DFF;     /* the O */
    --x:#FF4D3D;     /* the X */
    --radius:14px;
    --maxw:1180px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Pretendard',-apple-system,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-size:12px;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--mute);
    display:inline-flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--ink);display:inline-block}

  /* ---------- OX mark ---------- */
  .ox{display:inline-flex;align-items:center;gap:2px;font-weight:800}
  .ox .o{color:var(--o)}
  .ox .x{color:var(--x)}

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s, background .3s;
  }
  header.scrolled{border-color:var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:-.01em}
  .logo-mark{width:38px;height:38px;flex-shrink:0;display:block}
  .logo-mark svg{display:block;width:100%;height:100%}
  .logo-mark .lm-x{transform-origin:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
  .brand:hover .logo-mark .lm-x{transform:rotate(90deg)}
  .brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--mute);margin-top:1px}
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links a{font-size:14.5px;font-weight:600;color:#374151;transition:color .2s}
  .nav-links a:hover{color:var(--o)}
  .nav-cta{
    background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;
    font-size:14px;font-weight:700;transition:transform .2s,background .2s;
  }
  .nav-cta:hover{transform:translateY(-1px);background:#000}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px}
  .burger span{width:22px;height:2px;background:var(--ink);display:block;border-radius:2px}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:170px 0 100px;background:var(--bone);overflow:hidden}
  .hero-grid{position:absolute;inset:0;opacity:.5;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:54px 54px;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 72%)}
  .hero .wrap{position:relative;z-index:2}
  .hero-tag{margin-bottom:26px}
  .hero h1{
    font-size:clamp(34px,5.6vw,68px);font-weight:800;line-height:1.08;
    letter-spacing:-.03em;max-width:14ch;
  }
  .hero h1 .accent{position:relative;white-space:nowrap}
  .hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:6%;height:.32em;
    background:linear-gradient(90deg,var(--o),var(--x));opacity:.18;z-index:-1;border-radius:4px}
  .hero p{font-size:clamp(16px,1.7vw,19px);color:#444b5a;max-width:48ch;margin:26px 0 38px;line-height:1.7}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{padding:15px 28px;border-radius:999px;font-size:15px;font-weight:700;
    display:inline-flex;align-items:center;gap:8px;transition:transform .2s,box-shadow .2s}
  .btn-primary{background:var(--ink);color:#fff}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(15,19,32,.6)}
  .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:#fff}
  /* floating O / X glyphs */
  .glyph{position:absolute;font-weight:800;z-index:1;pointer-events:none;line-height:1}
  .glyph.o{right:6%;top:18%;font-size:230px;color:var(--o);opacity:.08}
  .glyph.x{right:20%;bottom:6%;font-size:150px;color:var(--x);opacity:.1}
  @media(max-width:860px){.glyph{display:none}}

  /* ---------- marquee ---------- */
  .strip{background:var(--ink);color:#fff;padding:18px 0;overflow:hidden;white-space:nowrap}
  .strip-track{display:inline-block;animation:slide 26s linear infinite;font-weight:700;font-size:15px;letter-spacing:.02em}
  .strip-track span{margin:0 26px;color:var(--mute-light)}
  .strip-track b{color:#fff;font-weight:800}
  .strip-track .dot{color:var(--x)}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- section base ---------- */
  section{padding:104px 0}
  .sec-head{max-width:680px;margin-bottom:56px}
  .sec-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.025em;margin:18px 0 16px;line-height:1.15}
  .sec-head p{font-size:17px;color:var(--mute);line-height:1.7}

  /* ---------- about / stats ---------- */
  .about{background:var(--paper)}
  .about-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
  .about-copy h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:18px 0 22px}
  .about-copy p{font-size:16.5px;color:#475065;line-height:1.8;margin-bottom:16px}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .stat{background:var(--bone);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px}
  .stat .num{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1}
  .stat:nth-child(1) .num{color:var(--o)}
  .stat:nth-child(4) .num{color:var(--x)}
  .stat .lbl{font-size:14px;color:var(--mute);font-weight:600;margin-top:10px}

  /* ---------- services ---------- */
  .services{background:var(--ink);color:#fff}
  .services .eyebrow{color:var(--mute-light)}
  .services .eyebrow::before{background:#fff}
  .services .sec-head h2{color:#fff}
  .services .sec-head p{color:var(--mute-light)}
  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .svc{
    position:relative;background:var(--ink-soft);border:1px solid var(--line-dark);
    border-radius:18px;padding:36px 32px;transition:transform .25s,border-color .25s;overflow:hidden;
  }
  .svc:hover{transform:translateY(-5px);border-color:#3a4straight}
  .svc:hover{border-color:#45506e}
  .svc-no{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--mute-light)}
  .svc-ico{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;margin:20px 0 22px;font-size:24px}
  .svc:nth-child(1) .svc-ico{background:rgba(43,77,255,.16);color:#7E93FF}
  .svc:nth-child(2) .svc-ico{background:rgba(255,77,61,.16);color:#FF8576}
  .svc:nth-child(3) .svc-ico{background:rgba(43,77,255,.16);color:#7E93FF}
  .svc:nth-child(4) .svc-ico{background:rgba(255,77,61,.16);color:#FF8576}
  .svc h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
  .svc p{font-size:15px;color:var(--mute-light);line-height:1.7;margin-bottom:20px}
  .svc ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
  .svc li{font-size:12.5px;font-weight:600;color:#cfd4de;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.09);padding:6px 12px;border-radius:999px}
  .svc .corner{position:absolute;right:-10px;bottom:-18px;font-size:120px;font-weight:800;opacity:.04;line-height:1}

  /* ---------- process ---------- */
  .process{background:var(--bone)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
  .step{padding:34px 26px 34px 0;border-right:1px solid var(--line);position:relative}
  .step:last-child{border-right:none}
  .step .mk{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--x)}
  .step h4{font-size:19px;font-weight:800;margin:16px 0 10px;letter-spacing:-.02em}
  .step p{font-size:14.5px;color:var(--mute);line-height:1.65}

  /* ---------- contact ---------- */
  .contact{background:var(--paper)}
  .contact-card{
    display:grid;grid-template-columns:.85fr 1.15fr;gap:0;
    border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--paper);
    box-shadow:0 30px 60px -40px rgba(15,19,32,.4);
  }
  .contact-info{background:var(--ink);color:#fff;padding:48px 42px;position:relative;overflow:hidden}
  .contact-info .glyph-o{position:absolute;right:-40px;top:-40px;font-size:200px;color:var(--o);opacity:.1;font-weight:800}
  .contact-info h3{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-bottom:16px;position:relative}
  .contact-info>p{font-size:15px;color:var(--mute-light);line-height:1.7;margin-bottom:36px;position:relative}
  .ci-item{position:relative;margin-bottom:24px}
  .ci-item .k{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--mute-light);text-transform:uppercase}
  .ci-item .v{font-size:16px;font-weight:600;margin-top:6px}
  .ci-download{position:relative;display:inline-flex;align-items:center;gap:9px;margin-top:34px;
    background:#fff;color:var(--ink);font-size:14.5px;font-weight:700;
    padding:13px 22px;border-radius:999px;transition:transform .2s,background .2s}
  .ci-download:hover{transform:translateY(-2px);background:#EEF1FF}
  .ci-download svg{color:var(--o)}
  .contact-form{padding:48px 42px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field{margin-bottom:18px}
  .field label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:#374151}
  .field input,.field textarea,.field select{
    width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;
    font-family:inherit;font-size:15px;color:var(--ink);background:var(--bone);transition:border-color .2s,background .2s}
  .field textarea{resize:vertical;min-height:110px}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--o);background:#fff}
  .form-submit{width:100%;background:var(--ink);color:#fff;border:none;padding:16px;border-radius:11px;
    font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s;margin-top:6px}
  .form-submit:hover{background:#000;transform:translateY(-1px)}
  .form-note{font-size:12.5px;color:var(--mute);margin-top:14px;text-align:center}
  .form-ok{display:none;background:rgba(43,77,255,.08);border:1px solid rgba(43,77,255,.25);
    color:var(--o);padding:14px;border-radius:11px;font-size:14px;font-weight:600;text-align:center;margin-top:14px}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:#fff;padding:64px 0 34px}
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
  .foot-brand{max-width:340px}
  .foot-brand .brand{color:#fff;margin-bottom:16px}
  .foot-brand p{font-size:14px;color:var(--mute-light);line-height:1.7}
  .foot-cols{display:flex;gap:64px;flex-wrap:wrap}
  .foot-col h5{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-light);margin-bottom:16px}
  .foot-col a,.foot-col p{display:block;font-size:14.5px;color:#cfd4de;margin-bottom:10px;transition:color .2s}
  .foot-col a:hover{color:#fff}
  .foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:13px;color:var(--mute-light)}

  /* ---------- responsive ---------- */
  @media(max-width:920px){
    .about-layout{grid-template-columns:1fr;gap:40px}
    .svc-grid{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .step{border-bottom:1px solid var(--line)}
    .step:nth-child(2n){border-right:none}
    .contact-card{grid-template-columns:1fr}
  }
  @media(max-width:680px){
    .nav-links{display:none}
    .burger{display:flex}
    .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;
      background:#fff;border-bottom:1px solid var(--line);padding:20px 28px;gap:18px}
    .form-row{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .step{border-right:none}
    section{padding:72px 0}
  }