/* ===========================================================
   ToolSphere — core stylesheet
   Palette: deep signal-navy + electric teal + warm amber spark
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
=========================================================== */

:root{
  --bg:#0A0E1F;
  --bg-soft:#0F1530;
  --panel:#151C3B;
  --panel-2:#1B2447;
  --border:#2A3462;
  --border-soft:#232C54;
  --text:#EAEEFC;
  --text-dim:#9AA5C9;
  --text-faint:#6D77A3;
  --accent:#43E8D8;
  --accent-dim:#2BB5A8;
  --spark:#FFB454;
  --spark-dim:#D89340;
  --danger:#FF6B6B;
  --ok:#59E38F;
  --radius:14px;
  --radius-sm:8px;
  --maxw:1180px;
  --shadow: 0 10px 40px -12px rgba(0,0,0,0.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(67,232,216,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(255,180,84,0.07), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;color:var(--text-dim);}
a{color:inherit;text-decoration:none;}
code, .mono, .stat-num{font-family:'JetBrains Mono',monospace;}
img{max-width:100%;display:block;}
::selection{background:var(--accent);color:#04201C;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

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

/* Smooth page entrance */
body{animation:pageIn .45s ease both;}
@keyframes pageIn{from{opacity:0;translate:0 6px;}to{opacity:1;translate:0 0;}}

/* Reveal-on-scroll (used by common.js via IntersectionObserver) */
.reveal{opacity:0;translate:0 16px;transition:opacity .5s ease, translate .5s ease;}
.reveal.in-view{opacity:1;translate:0 0;}

/* Smoother interactive transitions across the board */
a, button, input, textarea, select, .tool-card, .btn, .filter-chip, .chip{
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Button loading state */
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none;}
.btn.is-loading::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;color:#04201C;
  animation:btnspin .7s linear infinite;
}
@keyframes btnspin{to{transform:rotate(360deg);}}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,14,31,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:1.25rem;letter-spacing:-0.01em;}
.brand{background:linear-gradient(90deg, var(--text) 55%, var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}

.main-nav{display:flex;align-items:center;gap:28px;}
.main-nav a{color:var(--text-dim);font-size:.94rem;font-weight:500;transition:color .15s;position:relative;}
.main-nav a:hover{color:var(--text);}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);border-radius:8px;width:42px;height:42px;font-size:1.2rem;cursor:pointer;}

.header-cta{display:flex;align-items:center;gap:14px;}

/* dropdown */
.has-dropdown{position:relative;}
.dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px;width:340px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;translate:0 6px;transition:.18s ease;
}
.dropdown a{padding:9px 10px;border-radius:8px;font-size:.82rem;line-height:1.3;color:var(--text-dim);}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;translate:0 0;}
.dropdown a:hover{background:var(--panel-2);color:var(--accent);}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:.92rem;
  border:1px solid transparent;cursor:pointer;transition:.18s ease;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#04201C;}
.btn-primary:hover{background:#5FF0E2;transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-spark{background:var(--spark);color:#2B1700;}
.btn-spark:hover{background:#FFC578;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important;}
.btn-sm{padding:8px 16px;font-size:.82rem;}

/* ---------------- Hero / robot signature ---------------- */
.hero{padding:76px 0 60px;position:relative;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  background:rgba(67,232,216,0.08);border:1px solid rgba(67,232,216,0.25);
  padding:6px 12px;border-radius:999px;margin-bottom:20px;
}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);}
.hero h1 .accent{color:var(--accent);}
.hero .lead{font-size:1.08rem;max-width:52ch;}
.hero-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:32px;margin-top:40px;flex-wrap:wrap;}
.hero-stats div{border-left:2px solid var(--border);padding-left:14px;}
.stat-num{font-size:1.5rem;font-weight:700;color:var(--text);}
.stat-lbl{font-size:.78rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;}

/* Robot signature - loop animation, pure CSS/SVG */
.robot-stage{position:relative;display:flex;align-items:center;justify-content:center;}
.robot-orbit{
  position:absolute;width:340px;height:340px;border-radius:50%;
  border:1px dashed var(--border-soft);
  animation:spin 22s linear infinite;
}
.robot-orbit::before, .robot-orbit::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--spark);
  top:-4px;left:calc(50% - 4px);box-shadow:0 0 10px var(--spark);
}
.robot-orbit::after{top:auto;bottom:-4px;background:var(--accent);box-shadow:0 0 10px var(--accent);}
@keyframes spin{to{transform:rotate(360deg);}}

.robot{width:230px;animation:float 4.5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-14px) rotate(1deg);}}
.robot .eye{animation:blink 3.6s ease-in-out infinite;transform-origin:center;}
@keyframes blink{0%,92%,100%{transform:scaleY(1);}96%{transform:scaleY(0.12);}}
.robot .antenna-tip{animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------------- Sections ---------------- */
section{padding:64px 0;}
.section-head{max-width:640px;margin:0 auto 36px;text-align:center;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.1rem);}
.section-head p{font-size:1rem;}
.section-tag{color:var(--spark);font-family:'JetBrains Mono';font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;}

/* ---------------- Tool grid / cards ---------------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.tool-card{
  background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:22px;transition:.2s ease;position:relative;overflow:hidden;
}
.tool-card:hover{border-color:var(--accent-dim);transform:translateY(-3px);box-shadow:var(--shadow);}
.tool-card .icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(67,232,216,0.16), rgba(67,232,216,0.05));
  border:1px solid rgba(67,232,216,0.18);
  color:var(--accent);font-size:1.3rem;margin-bottom:14px;transition:transform .2s ease, background .2s ease;
}
.tool-card:hover .icon{transform:scale(1.08) rotate(-3deg);background:linear-gradient(135deg, rgba(67,232,216,0.26), rgba(255,180,84,0.08));}
.tool-card h3{font-size:1.05rem;margin-bottom:6px;}
.tool-card p{font-size:.88rem;margin-bottom:14px;}
.tool-card .tag{
  font-family:'JetBrains Mono';font-size:.68rem;color:var(--spark);
  text-transform:uppercase;letter-spacing:.06em;
}
.tool-card .go{position:absolute;right:20px;top:22px;color:var(--text-faint);transition:.2s;}
.tool-card:hover .go{color:var(--accent);transform:translateX(3px);}

.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;justify-content:center;}
.filter-chip{
  border:1px solid var(--border);background:transparent;color:var(--text-dim);
  padding:8px 16px;border-radius:999px;font-size:.84rem;cursor:pointer;transition:.15s;
}
.filter-chip.active, .filter-chip:hover{border-color:var(--accent);color:var(--accent);background:rgba(67,232,216,0.08);}

/* ---------------- Panels / feature strip ---------------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.strip .item{background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius);padding:20px;}
.strip .item h4{font-size:.98rem;margin-bottom:6px;}
.strip .item p{font-size:.86rem;margin:0;}

/* ---------------- Tool workspace (inside tool pages) ---------------- */
.tool-header{padding:44px 0 8px;}
.tool-header .crumbs{font-size:.8rem;color:var(--text-faint);margin-bottom:14px;}
.tool-header .crumbs a{color:var(--text-faint);}
.tool-header .crumbs a:hover{color:var(--accent);}
.tool-header h1{font-size:clamp(1.6rem,3.4vw,2.3rem);}
.tool-badges{display:flex;gap:8px;margin:14px 0 6px;flex-wrap:wrap;}
.badge{font-size:.72rem;font-family:'JetBrains Mono';background:var(--panel-2);border:1px solid var(--border);padding:4px 10px;border-radius:999px;color:var(--text-dim);}

.workspace{padding:20px 0 70px;}
.workspace .wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
@media (max-width:900px){.workspace .wrap{grid-template-columns:1fr;}}
.panel{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius);padding:26px;}
.panel h2{font-size:1.05rem;margin-bottom:18px;display:flex;align-items:center;gap:8px;}

.field{margin-bottom:18px;}
.field label{display:block;font-size:.84rem;color:var(--text-dim);margin-bottom:7px;font-weight:500;}
.field .hint{font-size:.74rem;color:var(--text-faint);margin-top:5px;}
input[type=text], input[type=number], input[type=email], textarea, select{
  width:100%;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);
  padding:11px 13px;border-radius:var(--radius-sm);font-family:inherit;font-size:.92rem;
}
textarea{resize:vertical;min-height:96px;}
input:focus, textarea:focus, select:focus{border-color:var(--accent);}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media (max-width:520px){.row-2,.row-3{grid-template-columns:1fr;}}

.chip-select{display:flex;flex-wrap:wrap;gap:8px;}
.chip-select .chip{
  border:1px solid var(--border);padding:7px 14px;border-radius:999px;font-size:.82rem;cursor:pointer;color:var(--text-dim);
}
.chip-select .chip.active{border-color:var(--accent);color:var(--accent);background:rgba(67,232,216,0.08);}

.output-list{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;padding-right:4px;}
.output-item{
  background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:12px 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:.9rem;
}
.output-item .txt{flex:1;}
.copy-btn{
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
  padding:6px 10px;border-radius:8px;font-size:.72rem;cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.copy-btn:hover{border-color:var(--accent);color:var(--accent);}
.copy-btn.copied{border-color:var(--ok);color:var(--ok);}

.empty-state{color:var(--text-faint);font-size:.88rem;text-align:center;padding:40px 10px;border:1px dashed var(--border);border-radius:var(--radius-sm);}
.result-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.result-meta .count{font-size:.78rem;color:var(--text-faint);}
.alert{
  border-radius:var(--radius-sm);padding:12px 14px;font-size:.85rem;margin-bottom:16px;border:1px solid;
}
.alert-warn{background:rgba(255,180,84,0.08);border-color:rgba(255,180,84,0.35);color:#FFCE8F;}
.alert-error{background:rgba(255,107,107,0.08);border-color:rgba(255,107,107,0.35);color:#FF9A9A;}
.alert-ok{background:rgba(89,227,143,0.08);border-color:rgba(89,227,143,0.35);color:#8FF0B4;}

/* score bar for SEO-type tools */
.score-wrap{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.score-ring{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--accent) calc(var(--pct,0)*1%), var(--border-soft) 0);flex-shrink:0;}
.score-ring span{width:52px;height:52px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono';font-size:.9rem;}

/* ---------------- Ad slots (monetization) ---------------- */
.ad-slot{
  border:1px dashed var(--border);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);
  font-size:.72rem;font-family:'JetBrains Mono';letter-spacing:.06em;text-transform:uppercase;
  min-height:90px;background:var(--bg-soft);margin:26px 0;
}

/* ---------------- FAQ ---------------- */
.faq-item{border-bottom:1px solid var(--border-soft);}
.faq-item summary{
  padding:18px 4px;cursor:pointer;font-weight:600;font-size:.98rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--accent);font-size:1.3rem;transition:.2s;}
.faq-item[open] summary::after{content:"−";}
.faq-item p{padding:0 4px 18px;}

/* ---------------- Blog ---------------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.blog-card{background:var(--panel);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;}
.blog-card .thumb{height:140px;background:linear-gradient(135deg,var(--panel-2),var(--bg-soft));display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--accent);}
.blog-card .body{padding:18px;}
.blog-card .meta{font-size:.72rem;color:var(--text-faint);font-family:'JetBrains Mono';margin-bottom:8px;}
.blog-card h3{font-size:1.02rem;}
.article{max-width:760px;margin:0 auto;padding:50px 24px 90px;}
.article h1{font-size:clamp(1.7rem,4vw,2.5rem);}
.article .meta{color:var(--text-faint);font-size:.85rem;font-family:'JetBrains Mono';margin-bottom:30px;}
.article h2{margin-top:36px;font-size:1.4rem;}
.article p{font-size:1rem;color:var(--text-dim);}
.article ul{color:var(--text-dim);}

/* ---------------- Footer ---------------- */
.site-footer{border-top:1px solid var(--border-soft);padding:56px 0 30px;background:var(--bg-soft);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h5{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:14px;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-grid a{color:var(--text-dim);font-size:.9rem;}
.footer-grid a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--border-soft);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--text-faint);}

/* ---------------- Legal / static pages ---------------- */
.legal-page{max-width:820px;margin:0 auto;padding:56px 24px 90px;}
.legal-page h1{font-size:2rem;}
.legal-page .updated{color:var(--text-faint);font-size:.85rem;margin-bottom:34px;}
.legal-page h2{font-size:1.2rem;margin-top:34px;}
.legal-page p, .legal-page li{color:var(--text-dim);font-size:.95rem;}

/* ---------------- Utility ---------------- */
.center{text-align:center;}
.mt-0{margin-top:0;}
.grad-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);border:none;margin:0;}

/* ---------------- Resume Maker preview ---------------- */
.resume-preview{
  background:#fff;color:#1a1f36;border-radius:10px;padding:34px 30px;min-height:400px;
  font-family:'Inter',sans-serif;font-size:.86rem;line-height:1.5;
}
.resume-preview .empty-state{color:var(--text-faint);background:transparent;border:1px dashed var(--border);}
.rp-header h3{color:#0F1530;font-family:'Space Grotesk';font-size:1.5rem;margin-bottom:2px;}
.rp-title{color:#43a89c;font-weight:600;font-size:.92rem;margin-bottom:6px;}
.rp-contact{color:#5a6180;font-size:.78rem;margin-bottom:18px;}
.rp-section{margin-top:18px;}
.rp-section h4{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#43a89c;
  border-bottom:1px solid #e3e6f0;padding-bottom:6px;margin-bottom:10px;
}
.rp-section p{color:#3a4160;margin:0;}
.rp-entry{margin-bottom:12px;}
.rp-entry-head{display:flex;justify-content:space-between;font-size:.86rem;color:#1a1f36;}
.rp-entry-head span{color:#8890b0;font-size:.76rem;}
.rp-entry-sub{color:#5a6180;font-size:.8rem;margin-bottom:4px;}
.rp-skills{display:flex;flex-wrap:wrap;gap:6px;}
.rp-skills span{background:#eef7f6;color:#2b8a7d;padding:4px 10px;border-radius:999px;font-size:.74rem;}

@media print{
  body *{visibility:hidden;}
  #resumePreview, #resumePreview *{visibility:visible;}
  #resumePreview{position:absolute;left:0;top:0;width:100%;padding:0;border-radius:0;}
  #previewPanel{border:none;padding:0;background:none;}
}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
  .robot-stage{order:-1;margin-bottom:10px;}
  .robot{width:170px;}
  .robot-orbit{width:230px;height:230px;}
  .main-nav{position:fixed;top:72px;left:0;right:0;background:var(--bg-soft);border-bottom:1px solid var(--border-soft);
    flex-direction:column;align-items:flex-start;padding:18px 24px;gap:6px;display:none;}
  .main-nav.open{display:flex;}
  .main-nav a{padding:10px 0;width:100%;}
  .has-dropdown .dropdown{position:static;transform:none;opacity:1;visibility:visible;width:100%;display:none;grid-template-columns:1fr;box-shadow:none;border:none;padding:0 0 0 10px;}
  .has-dropdown.open .dropdown{display:grid;}
  .nav-toggle{display:block;}
  .header-cta .btn-ghost{display:none;}
}