:root{
    --bg:#0B0F17; --surface:#121A27; --surface-2:#192335; --surface-3:#0E1521;
    --border:rgba(150,170,200,0.13); --border-strong:rgba(150,170,200,0.30);
    --text:#E7EEF8; --dim:#9CA9C0; --faint:#6C7A93;
    --accent:#2DD4BF; --accent-2:#38BDF8; --warn:#FBBF24; --violet:#C792EA;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    --r:16px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(45,212,191,0.08), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(56,189,248,0.07), transparent 55%),
      var(--bg);
    color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased;
    line-height:1.6; min-height:100vh; overflow-x:hidden;
  }
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:radial-gradient(rgba(150,170,200,0.06) 1px, transparent 1px);
    background-size:26px 26px; mask-image:linear-gradient(180deg,rgba(0,0,0,0.7),rgba(0,0,0,0.22));
  }
  .bgfx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .bgfx svg{position:absolute; opacity:0.05;}
  .bgfx .h1{top:10%; left:7%; width:130px;}
  .bgfx .h2{top:64%; left:82%; width:170px;}
  .bgfx .h3{top:34%; left:72%; width:80px;}

  .wrap{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:30px 18px 70px;}

  .top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:6px;}
  .brand{display:flex; align-items:center; gap:13px; min-width:0;}
  .brand .mark{width:44px; height:44px; flex:0 0 auto;}
  .brand-title{font-family:var(--mono); font-weight:700; font-size:1.5rem; letter-spacing:0.06em;}
  .brand-title b{color:var(--accent); font-weight:700;}
  .brand-sub{font-family:var(--mono); font-size:0.66rem; letter-spacing:0.14em; color:var(--faint); text-transform:uppercase; margin-top:3px;}

  .langtoggle{display:inline-flex; background:var(--surface-3); border:1px solid var(--border); border-radius:9px; padding:3px;}
  .langtoggle a{appearance:none; text-decoration:none; color:var(--dim); font-family:var(--mono); font-size:0.72rem; font-weight:700; padding:5px 10px; border-radius:6px;}
  .langtoggle a.on{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#062b27;}

  .lead{color:var(--dim); font-size:0.95rem; max-width:64ch; margin:16px 0 28px;}

  .grid{display:grid; gap:16px; grid-template-columns:1fr;}
  @media (min-width:680px){ .grid{grid-template-columns:1fr 1fr;} }

  .appcard{position:relative; display:flex; flex-direction:column; gap:12px;
    background:linear-gradient(180deg,var(--surface),var(--surface-3));
    border:1px solid var(--border); border-radius:var(--r); padding:22px 22px 20px;
    box-shadow:0 8px 30px rgba(0,0,0,0.28); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
  .appcard.live:hover{transform:translateY(-3px); border-color:var(--border-strong); box-shadow:0 14px 40px rgba(0,0,0,0.36);}
  .appcard .ico{width:46px; height:46px;}
  .appcard h2{font-family:var(--mono); font-size:1.14rem; letter-spacing:0.02em; margin:2px 0 0; color:var(--text);}
  .appcard .tag{font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint);}
  .appcard p{font-size:0.88rem; color:var(--dim); margin:0; line-height:1.65; flex:1;}
  .go{display:inline-flex; align-items:center; justify-content:center; gap:7px; align-self:flex-start;
    font-family:var(--mono); font-size:0.84rem; font-weight:700; text-decoration:none; padding:11px 18px; min-height:44px;
    border-radius:11px; border:0; cursor:pointer;
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#062b27;}
  .go:hover{filter:brightness(1.06);}

  .about{margin-top:34px; padding-top:20px; border-top:1px solid var(--border); color:var(--dim); font-size:0.9rem;}
  .about h3{font-family:var(--mono); font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); margin:0 0 8px;}
  .about p{margin:0 0 10px;}

  .ftr{margin-top:30px; padding-top:16px; border-top:1px solid var(--border);
    font-size:0.76rem; color:var(--faint); line-height:1.9;}
  .ftr a{color:var(--dim); text-decoration:none; border-bottom:1px dotted var(--faint);}
  .ftr a:hover{color:var(--accent); border-color:var(--accent);}

  @media (max-width:680px){
    .wrap{padding:22px 14px 60px;}
    .bgfx{display:none;}
    .brand-title{font-size:1.28rem;}
  }

  /* ===== added: motion & mobile polish ===== */
  /* gentle staggered entrance on load */
  @keyframes riseIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  .brand,.langtoggle,.lead,.appcard,.about,.ftr{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) backwards;}
  .langtoggle{animation-delay:.05s;}
  .lead{animation-delay:.12s;}
  .grid .appcard:nth-child(1){animation-delay:.18s;}
  .grid .appcard:nth-child(2){animation-delay:.26s;}
  .grid .appcard:nth-child(3){animation-delay:.34s;}
  .about{animation-delay:.42s;}
  .ftr{animation-delay:.48s;}

  /* accent bar sweeping the card top + soft glow on hover */
  .appcard{overflow:hidden;}
  .appcard::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    transform:scaleX(0); transform-origin:left; transition:transform .35s ease;}
  .appcard.live:hover::before{transform:scaleX(1);}
  .appcard.live:hover{box-shadow:0 14px 40px rgba(0,0,0,0.36), 0 10px 34px -14px rgba(45,212,191,0.40);}

  /* sheen sweeping across the button */
  .go{position:relative; overflow:hidden;}
  .go::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,0.28),transparent);
    transform:skewX(-18deg); transition:left .6s ease; pointer-events:none;}
  .appcard:hover .go::after{left:150%;}

  /* the spectroscopy icon draws itself like a scan */
  @keyframes scanDraw{from{stroke-dashoffset:120;} to{stroke-dashoffset:0;}}
  .ico .wave{stroke-dasharray:120; animation:scanDraw 1.5s ease-out .55s backwards;}

  /* the mechanism icon draws its curly arrow */
  @keyframes curlDraw{from{stroke-dashoffset:44;} to{stroke-dashoffset:0;}}
  .ico .curl{stroke-dasharray:44; animation:curlDraw 1.2s ease-out .6s backwards;}

  /* background hexagons (= molecules) drift slowly (desktop only) */
  @keyframes drift1{0%,100%{transform:translate(0,0) rotate(0);} 50%{transform:translate(10px,-14px) rotate(7deg);}}
  @keyframes drift2{0%,100%{transform:translate(0,0) rotate(0);} 50%{transform:translate(-14px,12px) rotate(-8deg);}}
  @keyframes drift3{0%,100%{transform:translate(0,0) rotate(0);} 50%{transform:translate(8px,16px) rotate(10deg);}}
  .bgfx .h1{animation:drift1 22s ease-in-out infinite;}
  .bgfx .h2{animation:drift2 28s ease-in-out infinite;}
  .bgfx .h3{animation:drift3 25s ease-in-out infinite;}

  /* mobile: respect safe areas + full-width, easy-to-tap button */
  @media (max-width:680px){
    .wrap{padding:22px calc(14px + env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));}
    .top{gap:10px;}
    .go{width:100%;}
  }

  /* honour reduced-motion preference */
  @media (prefers-reduced-motion: reduce){
    .brand,.langtoggle,.lead,.appcard,.about,.ftr,
    .bgfx .h1,.bgfx .h2,.bgfx .h3,.ico .wave,.ico .curl{animation:none !important;}
    .go::after{display:none;}
    .appcard::before{transition:none;}
  }