/* ============================================================================
   threejs-style.css — Superior Chemical Co.
   Design tokens lifted from threejs.org/files/main.css:
     font      Roboto Mono (monospace everywhere)
     accent    #049EF4
     surfaces  #222 bg / #2e2e2e elevated
     text      #bbb primary / #666 secondary
     borders   #444, 1px
     header    48px tall, bottom rule
   Layered AFTER styles.css, BEFORE liquid-glass.css.
   ========================================================================== */

:root{
  color-scheme: dark;

  --tjs-bg:#222;
  --tjs-bg2:#2e2e2e;
  --tjs-bg3:#2a2a2a;
  --tjs-blue:#049EF4;
  --tjs-text:#bbb;
  --tjs-text2:#666;
  --tjs-border:#444;
  --tjs-border-style:1px solid var(--tjs-border);

  --tjs-font:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tjs-header-h:48px;
  --tjs-maxw:1180px;

  /* compat vars so liquid-glass.css resolves on this page without styles.css */
  --sys-bg:#222;
  --sys-bg-elevated:#2e2e2e;
  --label:#bbb;
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--tjs-font);
  font-size:15px;
  line-height:25px;
  color:var(--tjs-text);
  background:var(--tjs-bg);
}

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

/* ---- background canvas: fixed, full-bleed, inert -------------------------
   This is the rule that was missing. Without it the canvas sits in normal
   document flow at its default 300x150 inline size and nothing renders. */
#threeui-bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  z-index:0;
  pointer-events:none;
}

/* everything real sits above the canvas */
.page{position:relative;z-index:1;}

/* ---------------------------------------------------------------------------
   Header — threejs.org: 48px, bottom rule, blue brand, mono
   ------------------------------------------------------------------------ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--tjs-header-h);
  display:flex;
  align-items:center;
  border-bottom:var(--tjs-border-style);
  background:rgba(34,34,34,0.86);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
}

.site-header .inner{
  width:100%;
  max-width:var(--tjs-maxw);
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:500;
  color:var(--tjs-blue);
  flex:1;
  min-width:0;
}
.brand img{width:22px;height:22px;display:block;flex-shrink:0;}
.brand .badge{
  border:1px solid var(--tjs-blue);
  color:var(--tjs-blue);
  border-radius:4px;
  font-size:11px;
  line-height:15px;
  padding:0 4px;
  margin-left:6px;
  white-space:nowrap;
}

.nav-links{display:flex;align-items:center;gap:18px;}
.nav-links a{
  font-size:14px;
  color:var(--tjs-text2);
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--tjs-blue);}

.nav-cta{
  font-size:14px;
  font-weight:500;
  color:#fff;
  background:var(--tjs-blue);
  padding:6px 14px;
  border-radius:980px;
  white-space:nowrap;
  transition:filter .15s ease;
}
.nav-cta:hover{filter:brightness(1.12);}

@media (max-width:820px){
  .nav-links .opt{display:none;}
}

/* ---------------------------------------------------------------------------
   Hero — big statement + live molecule + CTAs
   ------------------------------------------------------------------------ */
.hero{
  position:relative;
  border-bottom:var(--tjs-border-style);
  overflow:hidden;
}

.hero .inner{
  max-width:var(--tjs-maxw);
  margin:0 auto;
  padding:56px 16px 60px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:40px;
  align-items:center;
}

@media (max-width:900px){
  .hero .inner{grid-template-columns:1fr;gap:28px;padding:36px 16px 44px;}
}

.hero-eyebrow{
  font-size:13px;
  color:var(--tjs-blue);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.hero-eyebrow::before{
  content:"";
  width:24px;height:1px;
  background:var(--tjs-blue);
  display:block;
}

h1.hero-title{
  margin:0;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-0.02em;
  color:#fff;
}
h1.hero-title em{
  font-style:normal;
  color:var(--tjs-blue);
}

.hero-sub{
  margin:18px 0 0;
  font-size:15px;
  line-height:1.7;
  color:var(--tjs-text);
  max-width:52ch;
}

.hero-actions{
  margin-top:28px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* hero molecule stage */
.hero-stage{
  position:relative;
  border:var(--tjs-border-style);
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 40%, rgba(4,158,244,0.10), transparent 62%),
    var(--tjs-bg2);
  min-height:340px;
  overflow:hidden;
}
.hero-stage::after{
  content:"drag to rotate";
  position:absolute;
  left:12px;
  bottom:10px;
  font-size:11px;
  color:var(--tjs-text2);
  letter-spacing:0.04em;
  pointer-events:none;
}
.hero-stage .mol{
  position:absolute;
  inset:0;
}

@media (max-width:900px){
  .hero-stage{min-height:280px;}
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border-radius:8px;
  font-family:var(--tjs-font);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  border:1px solid transparent;
  transition:filter .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:active{transform:scale(0.98);}

.btn-fill{
  background:var(--tjs-blue);
  color:#fff;
}
.btn-fill:hover{filter:brightness(1.12);}

.btn-tint{
  background:transparent;
  color:var(--tjs-text);
  border-color:var(--tjs-border);
}
.btn-tint:hover{border-color:var(--tjs-blue);color:var(--tjs-blue);}

/* ---------------------------------------------------------------------------
   Section headers — threejs.org h2 style (blue, small, mono)
   ------------------------------------------------------------------------ */
.section-header{
  max-width:var(--tjs-maxw);
  margin:0 auto;
  padding:40px 16px 0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  border-top:var(--tjs-border-style);
}
.section-title{
  font-size:15px;
  font-weight:500;
  color:var(--tjs-blue);
  letter-spacing:0.02em;
}
.section-caption{
  font-size:13px;
  color:var(--tjs-text2);
}

/* ---------------------------------------------------------------------------
   Widget grid + widgets
   ------------------------------------------------------------------------ */
.widget-grid{
  max-width:var(--tjs-maxw);
  margin:0 auto;
  padding:20px 16px 8px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:16px;
}

.widget{
  display:flex;
  flex-direction:column;
  border:var(--tjs-border-style);
  border-radius:14px;
  background:var(--tjs-bg2);
  overflow:hidden;
}

/* molecule viewer inside each widget */
.widget .mol{
  height:180px;
  border-bottom:var(--tjs-border-style);
  background:
    radial-gradient(circle at 50% 45%, rgba(4,158,244,0.09), transparent 65%),
    var(--tjs-bg3);
  position:relative;
  cursor:grab;
}
.widget .mol:active{cursor:grabbing;}

.widget-body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1;}

.widget-top{display:flex;align-items:flex-start;gap:10px;}
.widget-icon{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;overflow:hidden;
  border:var(--tjs-border-style);
}
.widget-icon img{width:100%;height:100%;display:block;}
.widget-titles{min-width:0;}
.widget-name{
  font-size:15px;
  font-weight:500;
  color:#fff;
  letter-spacing:-0.01em;
}
.widget-sub{
  font-size:12px;
  color:var(--tjs-text2);
  margin-top:3px;
}

.widget-rows{display:flex;flex-direction:column;}
.widget-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  font-size:13px;
  border-bottom:1px solid rgba(68,68,68,0.5);
}
.widget-row:last-child{border-bottom:none;}
.widget-row .k{color:var(--tjs-text2);}
.widget-row .v{color:var(--tjs-text);font-weight:500;}

.chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  font-size:11px;
  padding:3px 9px;
  border-radius:980px;
  border:var(--tjs-border-style);
  color:var(--tjs-text2);
  background:rgba(4,158,244,0.05);
  white-space:nowrap;
}

.widget-cta.cta-row{
  margin-top:auto;
  padding-top:12px;
  border-top:var(--tjs-border-style);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.learn-link{font-size:13px;color:var(--tjs-text2);transition:color .15s ease;}
.learn-link:hover{color:var(--tjs-blue);}
.order-link{font-size:13px;font-weight:500;color:var(--tjs-blue);white-space:nowrap;}
.order-link:hover{filter:brightness(1.2);}

/* ---------------------------------------------------------------------------
   Trust strip
   ------------------------------------------------------------------------ */
.trust-strip{
  max-width:var(--tjs-maxw);
  margin:0 auto;
  padding:20px 16px 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.trust-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:var(--tjs-border-style);
  border-radius:10px;
  background:var(--tjs-bg2);
  font-size:13px;
  color:var(--tjs-text);
}
.trust-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--tjs-blue);
  flex-shrink:0;
  box-shadow:0 0 8px rgba(4,158,244,0.7);
}

/* ---------------------------------------------------------------------------
   Register CTA
   ------------------------------------------------------------------------ */
.register-section{
  max-width:var(--tjs-maxw);
  margin:0 auto;
  padding:48px 16px 64px;
}

.register-widget{
  border:var(--tjs-border-style);
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(4,158,244,0.14), transparent 55%),
    var(--tjs-bg2);
  padding:32px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,0.85fr);
  gap:32px;
  align-items:start;
}

@media (max-width:900px){
  .register-widget{grid-template-columns:1fr;gap:24px;padding:24px;}
}

.register-badge{
  width:44px;height:44px;border-radius:11px;overflow:hidden;
  border:var(--tjs-border-style);
  margin-bottom:16px;
}
.register-badge img{width:100%;height:100%;display:block;}

.register-title{
  margin:0;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.2;
  font-weight:500;
  color:#fff;
  letter-spacing:-0.02em;
}
.register-copy{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--tjs-text);
  max-width:46ch;
}

.register-form{display:flex;flex-direction:column;gap:10px;}

.register-form input,
.register-form select,
.register-form textarea{
  width:100%;
  font-family:var(--tjs-font);
  font-size:14px;
  color:#fff;
  background:var(--tjs-bg);
  border:var(--tjs-border-style);
  border-radius:8px;
  padding:11px 13px;
  -webkit-appearance:none;
  appearance:none;
}
.register-form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--tjs-text2) 50%),
                   linear-gradient(135deg,var(--tjs-text2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:36px;
}
.register-form input::placeholder,
.register-form textarea::placeholder{color:#5a5a5a;}
.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus{
  outline:none;
  border-color:var(--tjs-blue);
  box-shadow:0 0 0 3px rgba(4,158,244,0.14);
}

.register-submit{
  font-family:var(--tjs-font);
  font-size:14px;
  font-weight:500;
  color:#fff;
  background:var(--tjs-blue);
  border:none;
  border-radius:8px;
  padding:12px 18px;
  cursor:pointer;
  transition:filter .15s ease,transform .12s ease;
}
.register-submit:hover{filter:brightness(1.12);}
.register-submit:active{transform:scale(0.99);}

.form-note{
  font-size:11.5px;
  color:var(--tjs-text2);
  text-align:center;
  line-height:1.6;
}
.form-note a{color:var(--tjs-blue);}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
footer{
  max-width:var(--tjs-maxw);
  margin:0 auto;
  padding:24px 16px 48px;
  border-top:var(--tjs-border-style);
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  font-size:12.5px;
  color:var(--tjs-text2);
}
footer a{color:var(--tjs-blue);}
.foot-name{color:var(--tjs-text);}

/* ---------------------------------------------------------------------------
   Molecule viewer canvases (created by molecule3d.js)
   ------------------------------------------------------------------------ */
.mol canvas,
.mol-3d canvas{display:block;width:100%!important;height:100%!important;}

/* ---------------------------------------------------------------------------
   Accessibility / reduced motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}