@font-face{ font-family:"KoPubWorld Dotum_Pro"; src:url("vendor/KoPubWorldDotum-Light.woff") format("woff"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"KoPubWorld Dotum_Pro"; src:url("vendor/KoPubWorldDotum-Medium.woff") format("woff"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"KoPubWorld Dotum_Pro"; src:url("vendor/KoPubWorldDotum-Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; }

:root{
    --cyan:#22e0ff;
    --magenta:#ff3ad6;
    --violet:#7a5cff;
    --brand-red:#EF2330;
    --brand-green:#6FCF43;
    --brand-blue:#2F66D8;
    --bg:#05060f;
    --ink:#eaf6ff;
    --muted:#b9cbe6;
    --muted-2:#8fa6c4;
    --glass:rgba(140,180,255,0.06);
    --glass-brd:rgba(150,190,255,0.18);
    --font: "KoPubWorld Dotum_Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:var(--font);
    font-weight:500;
    background:var(--bg);
    color:var(--ink);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    cursor:none;
  }
  @media (pointer:coarse){ body{ cursor:auto; } }

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

  /* ---------- WebGL canvas (fixed behind everything) ---------- */
  #webgl{
    position:fixed;
    inset:0;
    z-index:0;
    display:block;
  }
  /* Cinematic vignette + scanlines overlay */
  #atmos{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(2,3,10,0.55) 85%, rgba(2,3,10,0.9) 100%);
    mix-blend-mode:normal;
  }
  #atmos::after{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
    opacity:.35;
  }

  /* ---------- Custom cursor ---------- */
  .cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:60; pointer-events:none; border-radius:50%; }
  .cursor{
    width:34px; height:34px; margin:-17px 0 0 -17px;
    border:1px solid rgba(120,220,255,0.7);
    box-shadow:0 0 18px rgba(60,200,255,0.35);
    transition:width .25s, height .25s, border-color .25s, background .25s;
    -webkit-backdrop-filter: invert(4%); backdrop-filter: invert(4%);
  }
  .cursor.hover{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:var(--magenta); background:rgba(255,58,214,0.08); }
  .cursor-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
  @media (pointer:coarse){ .cursor,.cursor-dot{ display:none; } }

  /* ---------- Floating chat button ---------- */
  .chat-fab{
    position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:55;
    display:flex; align-items:center; gap:10px; padding:14px 20px;
    border-radius:100px; font-size:13px; font-weight:500; letter-spacing:.04em; color:#fff;
    border:1px solid rgba(120,220,255,0.45);
    background:linear-gradient(135deg, rgba(34,224,255,0.22), rgba(122,92,255,0.22));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow:0 10px 40px -8px rgba(40,160,255,0.5);
    cursor:none; transition:transform .3s, box-shadow .3s, border-color .3s;
    animation:fabpulse 3s infinite;
  }
  .chat-fab:hover{ transform:translateY(-3px); border-color:var(--cyan); box-shadow:0 16px 50px -8px rgba(40,180,255,0.7); }
  .chat-fab.active{ background:linear-gradient(135deg, rgba(255,58,214,0.28), rgba(122,92,255,0.28)); border-color:var(--magenta); }
  .chat-fab svg{ width:20px; height:20px; flex:none; }
  @keyframes fabpulse{ 0%,100%{ box-shadow:0 10px 40px -8px rgba(40,160,255,0.5), 0 0 0 0 rgba(34,224,255,0.4);} 50%{ box-shadow:0 10px 40px -8px rgba(40,160,255,0.5), 0 0 0 14px rgba(34,224,255,0);} }
  @media (max-width:560px){ .chat-fab span{ display:none; } .chat-fab{ padding:15px; } }
  @media (pointer:coarse){ .chat-fab{ cursor:pointer; } }

  /* ---------- Loader ---------- */
  #loader{
    position:fixed; inset:0; z-index:100;
    background:radial-gradient(80% 60% at 50% 40%, #0a1030 0%, #05060f 70%);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    transition:opacity .9s ease, visibility .9s ease;
  }
  #loader.done{ opacity:0; visibility:hidden; }
  .loader-mark{ color:#eaf6ff; filter:drop-shadow(0 0 22px rgba(90,180,255,0.4)); }
  .loader-logo{ width:clamp(170px,42vw,250px); height:auto; display:block; }
  .loader-bar{ width:min(320px,60vw); height:2px; background:rgba(120,160,255,0.15); border-radius:2px; overflow:hidden; }
  .loader-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--magenta)); box-shadow:0 0 14px var(--cyan); }
  .loader-status{ font-size:12.5px; letter-spacing:.04em; color:var(--muted-2); text-align:center; max-width:82vw; line-height:1.5; }

  /* ---------- Nav ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px clamp(20px,5vw,64px);
  }
  .brand{ display:flex; align-items:center; color:var(--ink); transition:filter .3s; }
  .brand:hover{ filter:drop-shadow(0 0 12px rgba(90,200,255,0.5)); }
  .brand-logo{ height:23px; width:auto; color:var(--ink); flex:none; filter:drop-shadow(0 0 8px rgba(120,200,255,0.3)); }
  .brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); animation:pulse 2.4s infinite; }
  @keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(.55); opacity:.5;} }
  .navlinks{ display:flex; gap:26px; font-size:14px; font-weight:500; letter-spacing:.01em; color:var(--muted); }
  .navlinks a{ position:relative; transition:color .3s; }
  .navlinks a:hover{ color:var(--ink); }
  .navlinks a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); transition:width .3s; }
  .navlinks a:hover::after{ width:100%; }
  @media (max-width:720px){ .navlinks{ display:none; } }
  .navright{ display:flex; align-items:center; gap:18px; padding:8px 8px 8px 22px; border-radius:100px; background:rgba(9,12,26,0.58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border:1px solid rgba(150,190,255,0.14); box-shadow:0 8px 28px -14px rgba(0,0,0,0.7); }
  @media (max-width:720px){ .navright{ padding:6px; } }
  .langsel{ display:flex; gap:2px; padding:4px; border:1px solid var(--glass-brd); border-radius:100px; background:rgba(140,180,255,0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .langsel button{ font:inherit; font-size:12.5px; font-weight:500; letter-spacing:.03em; color:var(--muted); background:transparent; border:0; border-radius:100px; padding:6px 11px; cursor:none; transition:color .25s, background .25s; }
  .langsel button:hover{ color:var(--ink); }
  .langsel button.active{ color:#04121f; background:linear-gradient(90deg,var(--cyan),#6fe0ff); }
  @media (pointer:coarse){ .langsel button{ cursor:pointer; } }
  @media (max-width:480px){ .langsel button{ padding:6px 8px; font-size:11px; } }

  /* ---------- Layout / sections ---------- */
  main{ position:relative; z-index:10; }
  section{ position:relative; min-height:100vh; display:flex; align-items:center; padding:120px clamp(20px,6vw,90px); }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
    padding:8px 14px; border:1px solid rgba(60,200,255,0.25); border-radius:100px;
    background:rgba(30,220,255,0.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

  /* ---------- Hero ---------- */
  #hero{ flex-direction:column; justify-content:center; text-align:center; align-items:center; gap:22px; }
  /* soft dark scrim behind hero text so it stays legible over particles/orb */
  #hero::before{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(880px,92vw); height:min(620px,74vh); z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(3,5,14,0.66) 0%, rgba(3,5,14,0.42) 46%, rgba(3,5,14,0) 74%);
  }
  .hero-title{
    font-size:clamp(38px,8vw,112px); line-height:.94; font-weight:700; letter-spacing:-.02em;
    position:relative;
  }
  .hero-title .glitch{
    /* subtle brand tri-tint (red→green→blue) echoing the logo, softened with white */
    background:linear-gradient(100deg, #ff9aa0 0%, #ffffff 26%, #a8e6b4 50%, #ffffff 74%, #8fb2f2 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 40px rgba(150,180,255,0.22));
  }
  .hero-sub{ font-size:clamp(14px,2vw,18px); color:var(--muted); letter-spacing:.05em; max-width:540px; font-weight:300; }
  .hero-sub b{ color:var(--ink); font-weight:500; }
  .scroll-hint{ position:absolute; bottom:clamp(96px,24vh,280px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); font-size:10px; letter-spacing:.35em; text-transform:uppercase; }
  /* small / short screens: drop it to the very bottom so it never overlaps the CTA buttons */
  @media (max-height:860px), (max-width:600px){ .scroll-hint{ bottom:18px; } }
  @media (max-height:600px){ .scroll-hint{ display:none; } }
  .scroll-hint .mouse{ width:22px; height:36px; border:1px solid rgba(150,190,255,0.4); border-radius:14px; position:relative; }
  .scroll-hint .mouse::after{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:3px; height:7px; background:var(--cyan); border-radius:2px; animation:wheel 1.8s infinite; }
  @keyframes wheel{ 0%{ opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,12px);} }

  .cta-row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
  .btn{
    position:relative; padding:15px 30px; border-radius:100px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
    border:1px solid var(--glass-brd); background:var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow:hidden;
    transition:transform .3s, box-shadow .3s, border-color .3s;
  }
  .btn.primary{ border-color:rgba(60,200,255,0.5); box-shadow:0 0 0 rgba(60,200,255,0); }
  .btn:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(50,180,255,0.25); border-color:var(--cyan); }
  .btn::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(120,220,255,0.25),transparent); transform:translateX(-120%); transition:transform .6s; }
  .btn:hover::before{ transform:translateX(120%); }

  /* ---------- Section heads ---------- */
  .sec-head{ max-width:900px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
  .sec-title{ font-size:clamp(30px,6vw,68px); font-weight:700; letter-spacing:-.01em; line-height:1.02; }
  .sec-title .neon{ background:linear-gradient(100deg,var(--brand-red),var(--brand-green) 52%,var(--brand-blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .sec-desc{ color:var(--muted); font-size:clamp(15px,1.9vw,19px); max-width:640px; line-height:1.75; }

  /* ---------- Products grid ---------- */
  #products{ flex-direction:column; gap:64px; }
  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; width:100%; max-width:1240px; margin:0 auto; perspective:1600px; }
  @media (max-width:940px){ .cards{ grid-template-columns:repeat(2,1fr); max-width:760px; } }
  @media (max-width:600px){ .cards{ grid-template-columns:1fr; max-width:460px; gap:20px; } }
  .card{
    position:relative; padding:40px 36px 34px; border-radius:24px;
    background:linear-gradient(160deg, rgba(150,190,255,0.09), rgba(120,150,255,0.02));
    border:1px solid var(--glass-brd);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    overflow:hidden; transform-style:preserve-3d; transition:transform .2s ease-out, box-shadow .4s, border-color .4s;
    min-height:308px; display:flex; flex-direction:column;
  }
  .card::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(90,220,255,0.14), transparent 40%); opacity:0; transition:opacity .4s; }
  .card:hover::before{ opacity:1; }
  .card:hover{ border-color:rgba(120,220,255,0.5); box-shadow:0 30px 70px -30px rgba(40,160,255,0.5); }
  .card .idx{ font-size:13px; letter-spacing:.28em; color:var(--cyan); opacity:.85; margin-bottom:auto; }
  .card .glyph{ width:60px; height:60px; margin-bottom:22px; }
  .card h3{ font-size:25px; font-weight:700; margin-bottom:7px; letter-spacing:-.01em; }
  .card .csub{ color:var(--cyan); font-size:15px; letter-spacing:.01em; margin-bottom:14px; opacity:.95; font-weight:500; }
  .card p.desc{ color:var(--muted); font-size:16.5px; line-height:1.8; }
  .card .tag{ margin-top:20px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(205,222,246,0.78); }
  .glyph circle,.glyph path,.glyph rect,.glyph line,.glyph polyline{ stroke:url(#cardgrad); stroke-width:1.4; fill:none; vector-effect:non-scaling-stroke; }

  /* ---------- Stats ---------- */
  .stats{ display:flex; flex-wrap:wrap; gap:40px 70px; justify-content:center; margin-top:10px; }
  .stat{ text-align:center; }
  .stat .num{ font-size:clamp(34px,5vw,56px); font-weight:700; background:linear-gradient(180deg,#fff,#7fb6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

  /* ---------- About ---------- */
  #about{ flex-direction:column; gap:40px; }
  .about-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; max-width:1100px; margin:0 auto; width:100%; }
  .about-cell{ padding:28px; border-radius:18px; border:1px solid rgba(150,190,255,0.12); background:rgba(120,160,255,0.03); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .about-cell h4{ font-size:16px; letter-spacing:.02em; margin-bottom:10px; color:var(--cyan); }
  .about-cell p{ color:var(--muted); font-size:15px; line-height:1.75; }

  /* ---------- Contact ---------- */
  #contact{ flex-direction:column; align-items:center; text-align:center; gap:36px; }
  .contact-panel{
    position:relative; width:min(760px,92vw); padding:60px clamp(24px,5vw,64px); border-radius:28px; text-align:center;
    background:linear-gradient(160deg, rgba(150,190,255,0.08), rgba(120,80,255,0.04));
    border:1px solid var(--glass-brd); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow:0 40px 120px -40px rgba(60,120,255,0.4);
  }
  .contact-panel h2{ font-size:clamp(28px,5vw,52px); font-weight:700; margin-bottom:18px; }
  .contact-panel p{ color:var(--muted); margin-bottom:30px; font-size:15px; line-height:1.7; }
  .contact-meta{ display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:center; font-size:13px; color:var(--muted); letter-spacing:.05em; }
  .contact-meta b{ color:var(--ink); font-weight:500; }

  /* ---------- Contact form + map ---------- */
  .contact-wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:24px; width:min(1080px,94vw); text-align:left; }
  @media (max-width:880px){ .contact-wrap{ grid-template-columns:1fr; } }
  .contact-form, .contact-side{ padding:32px clamp(20px,3vw,36px); border-radius:24px; background:linear-gradient(160deg, rgba(150,190,255,0.08), rgba(120,80,255,0.04)); border:1px solid var(--glass-brd); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow:0 40px 120px -50px rgba(60,120,255,0.35); }
  .contact-form{ display:flex; flex-direction:column; gap:15px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
  .field{ display:flex; flex-direction:column; gap:7px; }
  .field label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .field input, .field textarea, .field select{ width:100%; padding:13px 15px; border-radius:12px; background:rgba(10,16,40,0.5); border:1px solid rgba(150,190,255,0.16); color:var(--ink); font-family:inherit; font-size:14px; outline:none; transition:border-color .25s, box-shadow .25s; }
  .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,224,255,0.12); }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(150,175,205,0.5); }
  .field textarea{ min-height:112px; resize:vertical; }
  .field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2322e0ff' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:38px; }
  .field select option{ background:#0a1028; color:#eaf6ff; }
  @media (pointer:fine){ .field input, .field textarea{ cursor:text; } .field select{ cursor:pointer; } }
  button.btn{ font:inherit; }
  .form-submit{ width:100%; margin-top:4px; color:#ffffff; font-weight:700; background:linear-gradient(90deg, rgba(34,224,255,0.22), rgba(122,92,255,0.22)); border-color:rgba(120,220,255,0.6); }
  .form-submit:hover{ background:linear-gradient(90deg, rgba(34,224,255,0.34), rgba(122,92,255,0.34)); color:#ffffff; }
  .form-note{ font-size:13px; min-height:18px; line-height:1.5; color:var(--cyan); }
  .contact-side{ display:flex; flex-direction:column; gap:20px; }
  .contact-side .contact-meta{ flex-direction:column; align-items:flex-start; gap:11px; }
  .map-embed{ border-radius:16px; overflow:hidden; border:1px solid var(--glass-brd); height:240px; margin-top:auto; }
  .map-embed iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.15) contrast(1.05) brightness(.92); }

  /* ---------- Contact center (AI robot) ---------- */
  #contact-center{ justify-content:center; }
  .cc-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; width:min(1150px,100%); margin:0 auto; }
  @media (max-width:880px){ .cc-wrap{ grid-template-columns:1fr; } }
  .cc-visual{ position:relative; width:100%; max-width:520px; aspect-ratio:1/1; margin:0 auto; }
  #robotCanvas{ width:100%; height:100%; display:block; }
  .cc-badge{ position:absolute; top:12px; left:12px; font-size:10px; letter-spacing:.26em; color:var(--cyan); border:1px solid rgba(60,200,255,0.3); border-radius:100px; padding:7px 13px; background:rgba(10,16,40,0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .cc-status{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.06em; color:#cfe0f5; border:1px solid var(--glass-brd); border-radius:100px; padding:9px 16px; background:rgba(10,16,40,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space:nowrap; }
  .cc-dot{ width:8px; height:8px; border-radius:50%; background:#38ffa0; box-shadow:0 0 10px #38ffa0; animation:pulse 1.8s infinite; }
  .cc-copy .eyebrow{ margin-bottom:22px; }
  .cc-copy .sec-title{ text-align:left; }
  .cc-sub{ color:var(--muted); font-size:clamp(15px,1.8vw,18px); line-height:1.75; margin:18px 0 28px; }
  .cc-points{ list-style:none; display:flex; flex-direction:column; gap:15px; }
  .cc-points li{ position:relative; padding-left:34px; color:#d7e6fb; font-size:15px; line-height:1.75; }
  .cc-points li::before{ content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,var(--cyan),var(--violet)); box-shadow:0 0 14px rgba(40,180,255,0.4); }
  .cc-points li::after{ content:"✓"; position:absolute; left:6px; top:0; font-size:13px; color:#04121f; font-weight:700; line-height:24px; }

  /* ---------- Product detail modal ---------- */
  .card.clickable{ cursor:none; }
  .card-more{ margin-top:16px; font-size:12px; letter-spacing:.04em; color:var(--cyan); opacity:.72; transition:opacity .3s, transform .3s; }
  .card:hover .card-more{ opacity:1; transform:translateX(4px); }
  .modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px); visibility:hidden; opacity:0; transition:opacity .4s, visibility .4s; cursor:auto; }
  .modal.open{ visibility:visible; opacity:1; }
  .modal-backdrop{ position:absolute; inset:0; background:rgba(3,5,14,0.72); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
  .modal-stack{ position:relative; width:min(1080px,100%); display:flex; flex-direction:column; }
  .modal-panel{ position:relative; width:100%; height:min(88vh,820px); display:flex; flex-direction:column; border-radius:26px; border:1px solid var(--glass-brd); background:linear-gradient(165deg, rgba(20,26,54,0.94), rgba(12,14,32,0.96)); box-shadow:0 60px 160px -40px rgba(40,120,255,0.55); transform:translateY(26px) scale(.98); transition:transform .45s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
  .modal.open .modal-panel{ transform:translateY(0) scale(1); }
  /* product title floating in 3D, centered in the panel's top bar */
  .modal-float{ position:absolute; left:50%; top:24px; z-index:5; pointer-events:none; white-space:nowrap; max-width:82%; overflow:hidden; text-overflow:ellipsis; text-align:center;
    font-size:clamp(26px,3.6vw,44px); font-weight:800; letter-spacing:-.02em; line-height:1.1;
    background:linear-gradient(100deg,#ff9aa0,#ffffff 30%,#a8e6b4 55%,#ffffff 78%,#8fb2f2);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 10px 22px rgba(40,120,255,0.5)) drop-shadow(0 2px 1px rgba(0,0,0,0.35));
    opacity:0; transform:translate(-50%,8px) perspective(800px) rotateX(26deg) scale(.93); }
  .modal.open .modal-float{ animation:floatTitleIn .5s .08s cubic-bezier(.2,.8,.2,1) forwards, floatTitleIdle 4.2s .6s ease-in-out infinite; }
  @keyframes floatTitleIn{ to{ opacity:1; transform:translate(-50%,0) perspective(800px) rotateX(12deg) scale(1); } }
  @keyframes floatTitleIdle{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }
  .modal-close{ position:absolute; top:18px; right:18px; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--glass-brd); background:rgba(150,190,255,0.08); color:var(--ink); font-size:15px; cursor:pointer; transition:border-color .3s, background .3s, transform .3s; }
  .modal-close:hover{ border-color:var(--magenta); background:rgba(255,58,214,0.14); transform:rotate(90deg); }
  .modal-head{ position:relative; text-align:center; padding:76px clamp(24px,4vw,44px) 60px; border-bottom:1px solid rgba(150,190,255,0.12); }
  .modal-idx{ position:absolute; top:28px; left:clamp(24px,4vw,44px); font-size:12px; letter-spacing:.3em; color:var(--cyan); margin:0; }
  .modal-head h3{ display:none; }
  .modal-head p{ color:var(--muted); font-size:16px; margin-top:6px; letter-spacing:.02em; }
  .modal-head .modal-demo{ position:absolute; left:clamp(24px,4vw,44px); bottom:16px; margin:0; }
  .modal-tabs-wrap{ display:flex; align-items:center; gap:8px; padding:16px clamp(24px,4vw,44px) 0; }
  .tab-nav{ flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--glass-brd); background:rgba(150,190,255,0.07); color:var(--ink); font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .25s, background .25s, color .25s; }
  .tab-nav:hover{ border-color:var(--cyan); background:rgba(34,224,255,0.12); }
  .modal-tabs{ display:flex; gap:8px; overflow-x:auto; flex:1; scrollbar-width:none; scroll-behavior:smooth; }
  .modal-tabs::-webkit-scrollbar{ display:none; }
  .mtab{ flex:none; padding:11px 18px; border-radius:100px; border:1px solid var(--glass-brd); background:transparent; color:var(--muted); font:inherit; font-size:14.5px; font-weight:500; white-space:nowrap; cursor:pointer; transition:color .25s, border-color .25s, background .25s; }
  .mtab:hover{ color:var(--ink); border-color:rgba(120,220,255,0.4); }
  .mtab.active{ color:#04121f; background:linear-gradient(90deg,var(--cyan),#6fe0ff); border-color:transparent; }
  .modal-body{ padding:24px clamp(24px,4vw,44px) 40px; overflow-y:auto; flex:1 1 auto; min-height:0; }
  .d-intro{ color:#e3eefb; font-size:17px; line-height:1.9; }
  .d-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(264px,1fr)); gap:16px; }
  .d-card{ padding:26px; border-radius:16px; border:1px solid rgba(150,190,255,0.14); background:rgba(120,160,255,0.04); }
  .d-badge{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#04121f; background:linear-gradient(135deg,var(--cyan),var(--magenta)); margin-bottom:12px; }
  .d-card h4{ font-size:17px; font-weight:700; margin-bottom:11px; color:#eaf6ff; }
  .d-card p{ color:var(--muted); font-size:15.5px; line-height:1.75; }
  .d-card ul{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0; }
  .d-card li{ position:relative; padding-left:16px; color:var(--muted); font-size:15px; line-height:1.65; }
  .d-card li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
  .d-eff{ display:inline-block; margin-top:14px; font-size:11px; letter-spacing:.05em; color:var(--cyan); border:1px solid rgba(60,200,255,0.35); border-radius:8px; padding:5px 10px; }
  .d-steps{ display:flex; flex-direction:column; gap:12px; }
  .d-step{ display:flex; gap:16px; padding:18px 20px; border-radius:14px; border:1px solid rgba(150,190,255,0.12); background:rgba(120,160,255,0.03); }
  .d-num{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#04121f; background:linear-gradient(135deg,var(--cyan),var(--violet)); }
  .d-step h4{ font-size:14px; margin-bottom:5px; }
  .d-step p{ color:var(--muted); font-size:14px; line-height:1.65; }
  @media (pointer:coarse){ .card.clickable, .modal-close, .mtab{ cursor:pointer; } }

  footer{ position:relative; z-index:10; text-align:center; padding:40px 20px 54px; color:var(--muted); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }

  /* Featured CORE badge */
  .card.core .idx::after{ content:"CORE"; margin-left:10px; font-size:9px; letter-spacing:.2em; padding:3px 7px; border:1px solid rgba(60,200,255,0.4); border-radius:6px; color:var(--cyan); vertical-align:middle; }

  /* ---------- Clients 3D orbit ---------- */
  #clients{ flex-direction:column; gap:20px; }
  .orbit{ position:relative; width:100%; height:min(480px,80vw); display:flex; align-items:center; justify-content:center; perspective:1100px; }
  #clientsSphere{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(470px,82vw); height:min(470px,82vw); z-index:0; pointer-events:none; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .orbit-stage{ position:relative; z-index:1; transform-style:preserve-3d; width:1px; height:1px; }
  /* NOTE: no backdrop-filter here — on iOS WebKit it flickers on these per-frame
     transformed + re-stacked (z-index) chips. Solid-ish bg keeps them readable instead. */
  .chip-client{ display:inline-flex; align-items:center; gap:11px; padding:8px 20px 8px 9px; border:1px solid rgba(150,190,255,0.32); border-radius:100px; background:rgba(15,22,44,0.86); white-space:nowrap; box-shadow:0 8px 22px -10px rgba(0,0,0,0.6); }
  .chip-logo{ width:36px; height:36px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 2px 8px rgba(0,0,0,0.28); overflow:hidden; }
  .chip-logo img{ width:25px; height:25px; object-fit:contain; display:block; }
  .chip-name{ font-size:15.5px; font-weight:600; letter-spacing:.01em; color:#eef6ff; }
  .orbit-chip{ position:absolute; left:50%; top:50%; will-change:transform,opacity; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; transition:border-color .3s, box-shadow .3s; }
  .orbit-chip:hover{ border-color:var(--cyan); box-shadow:0 0 30px rgba(40,180,255,0.5); }
  .orbit-chip:hover .chip-name{ color:#fff; }
  @media (prefers-reduced-motion:reduce){ .orbit-bg::before, .orbit-bg::after{ animation:none; } }

  /* ---------- Values ---------- */
  .values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; max-width:1100px; margin:0 auto; width:100%; }
  .value{ padding:32px 28px; border-radius:20px; border:1px solid rgba(150,190,255,0.12); background:rgba(120,160,255,0.03); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position:relative; overflow:hidden; transition:border-color .4s, transform .3s; }
  .value:hover{ border-color:rgba(120,220,255,0.4); transform:translateY(-4px); }
  .value .vn{ font-size:40px; font-weight:700; color:transparent; -webkit-text-stroke:1px rgba(120,200,255,0.45); margin-bottom:16px; line-height:1; }
  .value h4{ font-size:20px; margin-bottom:10px; letter-spacing:-.01em; }
  .value p{ color:var(--muted); font-size:14px; line-height:1.65; }

  /* ---------- Dev services ---------- */
  #services-dev{ flex-direction:column; gap:56px; }
  .dev-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:920px; margin:0 auto; width:100%; }
  @media (max-width:640px){ .dev-grid{ grid-template-columns:1fr; max-width:460px; } }
  .dev-item{ padding:40px 38px; border-radius:22px; border:1px solid var(--glass-brd); background:linear-gradient(160deg,rgba(150,190,255,0.07),rgba(120,150,255,0.02)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition:border-color .4s, transform .3s; }
  .dev-item:hover{ border-color:rgba(120,220,255,0.45); transform:translateY(-4px); }
  .dev-item h3{ font-size:24px; margin-bottom:12px; letter-spacing:-.01em; }
  .dev-item p{ color:var(--muted); font-size:16.5px; line-height:1.75; margin-bottom:20px; }
  .stack{ display:flex; flex-wrap:wrap; gap:9px; }
  .stack span{ font-size:13px; letter-spacing:.03em; padding:7px 13px; border-radius:9px; border:1px solid rgba(120,200,255,0.2); color:var(--cyan); background:rgba(30,220,255,0.05); }

  /* ---------- FAQ ---------- */
  #faq{ flex-direction:column; gap:40px; }
  .faq-list{ max-width:840px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:14px; }
  .faq{ border:1px solid var(--glass-brd); border-radius:16px; background:rgba(120,160,255,0.03); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow:hidden; transition:border-color .3s; }
  .faq[open]{ border-color:rgba(120,220,255,0.4); }
  .faq summary{ list-style:none; padding:22px 26px; font-size:16px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; color:var(--cyan); font-size:24px; font-weight:500; transition:transform .3s; flex:none; }
  .faq[open] summary::after{ transform:rotate(45deg); }
  .faq p{ padding:0 26px 24px; color:var(--muted); font-size:14px; line-height:1.75; }
  @media (pointer:fine){ .faq summary{ cursor:none; } }

  .reveal{ opacity:0; transform:translateY(40px); }

  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
  }

/* ---------- Core Values — interactive 3D ---------- */
.values3d{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(24px,5vw,56px); align-items:center; width:min(1080px,100%); margin:0 auto; }
@media (max-width:860px){ .values3d{ grid-template-columns:1fr; } }
.values-stage{ position:relative; width:100%; max-width:500px; aspect-ratio:1/1; margin:0 auto; }
.values-stage::before{ content:""; position:absolute; inset:-6%; z-index:0; border-radius:50%; background:radial-gradient(circle, rgba(4,6,16,0.7) 30%, rgba(4,6,16,0.35) 55%, transparent 72%); pointer-events:none; }
#valuesCanvas{ position:relative; z-index:1; width:100%; height:100%; display:block; }
.values-panel{ display:flex; flex-direction:column; gap:22px; padding:26px clamp(18px,2.5vw,30px); border-radius:22px; background:rgba(9,12,24,0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border:1px solid var(--glass-brd); box-shadow:0 30px 90px -40px rgba(0,0,0,0.7); }
.value-tabs{ display:flex; flex-direction:column; gap:10px; }
.vtab{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:14px; border:1px solid var(--glass-brd); background:rgba(14,18,36,0.7); color:var(--muted); font:inherit; font-size:15px; font-weight:500; text-align:left; cursor:none; transition:color .3s, border-color .3s, background .3s, transform .3s; }
.vtab .vdot{ width:12px; height:12px; border-radius:50%; flex:none; box-shadow:0 0 12px currentColor; }
.vtab .vidx{ font-size:12px; letter-spacing:.2em; color:var(--muted); }
.vtab:hover{ color:var(--ink); border-color:rgba(120,220,255,0.4); transform:translateX(4px); }
.vtab.active{ background:rgba(120,160,255,0.08); }
.value-detail{ padding-left:2px; min-height:104px; }
.value-detail h3{ font-size:clamp(22px,3.2vw,32px); font-weight:700; margin-bottom:12px; letter-spacing:-.01em; transition:color .4s; }
.value-detail p{ color:var(--muted); font-size:15px; line-height:1.75; max-width:430px; }
@media (pointer:coarse){ .vtab{ cursor:pointer; } }

/* ---------- Per-product mini 3D preview (hover) ---------- */
.card-mini{ position:absolute; top:12px; right:12px; width:116px; height:116px; pointer-events:none; opacity:0; transition:opacity .35s ease; z-index:3; }
.card-mini.show{ opacity:1; }
@media (max-width:720px){ .card-mini{ display:none; } }

/* ---------- Live impact stat visualization ---------- */
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat-viz{ display:block; width:172px; height:50px; margin:14px 0 8px; }
@media (max-width:480px){ .stat-viz{ width:150px; height:44px; } }

/* ---------- Scroll-to-top button (bottom-left, appears after scrolling) ---------- */
.scroll-top{ position:fixed; left:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:55; width:46px; height:46px; border-radius:50%; border:1px solid var(--glass-brd); background:rgba(9,12,26,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color:var(--ink); cursor:none; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s, transform .3s, visibility .3s, border-color .3s, box-shadow .3s; }
.scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top:hover{ border-color:var(--cyan); box-shadow:0 0 18px rgba(40,180,255,0.4); }
.scroll-top svg{ width:20px; height:20px; }
@media (pointer:coarse){ .scroll-top{ cursor:pointer; } }

/* ---------- Native cursor over the chat widget & iframes ----------
   (custom cursor is hidden by body{cursor:none} and sits below the widget's z-index,
    so restore the OS cursor inside the FlowChat widget and any iframe.) */
#flowchat-widget-root, #flowchat-widget-root *{ cursor:auto; }
#flowchat-widget-root button, #flowchat-widget-root a, #flowchat-widget-root [role="button"], #flowchat-widget-root input, #flowchat-widget-root textarea{ cursor:auto; }
#flowchat-widget-root button, #flowchat-widget-root a, #flowchat-widget-root [role="button"]{ cursor:pointer; }
#flowchat-widget-root input, #flowchat-widget-root textarea{ cursor:text; }
iframe{ cursor:auto; }

/* ---------- Mobile hamburger menu ---------- */
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; padding:0 9px; border:1px solid var(--glass-brd); border-radius:10px; background:rgba(140,180,255,0.06); cursor:none; }
.hamburger span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:720px){ .hamburger{ display:flex; } }
@media (pointer:coarse){ .hamburger{ cursor:pointer; } }
.mobile-menu{ position:fixed; inset:0; z-index:39; background:rgba(6,8,18,0.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{ font-size:23px; font-weight:700; letter-spacing:.04em; color:var(--ink); transition:color .25s; }
.mobile-menu a:hover, .mobile-menu a:active{ color:var(--cyan); }

/* ---------- Product demo buttons (card + detail modal) ---------- */
@keyframes demopulse{ 0%,100%{ box-shadow:0 4px 16px -4px rgba(40,180,255,0.6), 0 0 0 0 rgba(34,224,255,0.55); } 70%{ box-shadow:0 4px 16px -4px rgba(40,180,255,0.6), 0 0 0 9px rgba(34,224,255,0); } }
.modal-demo{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:11px 20px; border-radius:100px; font-size:13px; font-weight:700; letter-spacing:.02em; color:#04121f; background:linear-gradient(90deg,var(--cyan),#6fe0ff); border:1px solid rgba(120,220,255,0.6); cursor:pointer; animation:demopulse 2.6s infinite; transition:transform .25s, box-shadow .25s; }
.modal-demo:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px -10px rgba(40,180,255,0.85); }
.modal-demo[hidden]{ display:none; }

/* per-card demo button — top-right corner of each product card */
.card-demo{ position:absolute; bottom:16px; right:16px; z-index:4; display:inline-flex; align-items:center; padding:6px 13px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.02em; color:#04121f; background:linear-gradient(90deg,var(--cyan),#6fe0ff); border:1px solid rgba(120,220,255,0.65); cursor:none; animation:demopulse 2.6s infinite; transition:transform .25s, box-shadow .25s; }
.card-demo::after{ content:'  ↗'; }
.card-demo:hover{ transform:translateY(-2px) scale(1.06); box-shadow:0 10px 26px -6px rgba(40,180,255,0.9); }
@media (pointer:coarse){ .card-demo{ cursor:pointer; } }