/* ============================================================
   FREELANCE RATE CALCULATOR
   style.css

   Plain CSS
   No frameworks
   No external dependencies
   Mobile-first responsive design
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */

:root {

  /* Colors */

  --color-background: #f7f8fc;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f3f8;

  --color-text: #171a24;
  --color-text-secondary: #626978;
  --color-text-muted: #8a91a0;

  --color-primary: #635bff;
  --color-primary-dark: #5048e5;
  --color-primary-light: #eeedff;

  --color-border: #e2e5ec;
  --color-border-dark: #d5d9e2;

  --color-success: #16845b;
  --color-success-background: #eaf8f2;

  --color-error: #c73737;
  --color-error-background: #fff0f0;


  /* Typography */

  --font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-size-base: 16px;
  --line-height-base: 1.6;


  /* Layout */

  --container-width: 1120px;

  --header-height: 72px;

  --section-padding: 80px;

  --border-radius-small: 8px;
  --border-radius-medium: 14px;
  --border-radius-large: 22px;

  --shadow-small:
    0 2px 8px rgba(20, 24, 40, 0.04);

  --shadow-medium:
    0 12px 40px rgba(20, 24, 40, 0.08);

  --shadow-large:
    0 24px 70px rgba(20, 24, 40, 0.12);


  /* Transitions */

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

}


/* ============================================================
   2. RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background:
    var(--color-background);

  color:
    var(--color-text);

  font-family:
    var(--font-family);

  font-size:
    var(--font-size-base);

  line-height:
    var(--line-height-base);

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


img {
  display: block;
  max-width: 100%;
}


button,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


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


p,
h1,
h2,
h3 {
  margin-top: 0;
}


p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   3. ACCESSIBILITY
   ============================================================ */

:focus-visible {
  outline:
    3px solid
    rgba(99, 91, 255, 0.35);

  outline-offset: 3px;
}


.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* ============================================================
   4. GLOBAL LAYOUT
   ============================================================ */

.container {
  width: min(
    calc(100% - 32px),
    var(--container-width)
  );

  margin-inline: auto;
}


section {
  scroll-margin-top: 90px;
}


.section-heading {
  max-width: 700px;

  margin-bottom: 42px;
}


.section-heading h2 {
  margin-bottom: 14px;

  font-size: clamp(
    2rem,
    5vw,
    3rem
  );

  line-height: 1.12;

  letter-spacing: -0.035em;
}


.section-heading > p:last-child {
  color:
    var(--color-text-secondary);

  font-size: 1.05rem;

  line-height: 1.7;
}


/* ============================================================
   5. EYEBROW
   ============================================================ */

.eyebrow {
  display: inline-flex;

  align-items: center;

  margin-bottom: 14px;

  color:
    var(--color-primary);

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.09em;

  line-height: 1.2;

  text-transform: uppercase;
}


.eyebrow::before {
  content: "";

  width: 7px;
  height: 7px;

  margin-right: 8px;

  border-radius: 50%;

  background:
    var(--color-primary);
}


/* ============================================================
   6. HEADER
   ============================================================ */

.site-header {
  position: sticky;

  top: 0;

  z-index: 100;

  height:
    var(--header-height);

  border-bottom:
    1px solid
    rgba(226, 229, 236, 0.8);

  background:
    rgba(247, 248, 252, 0.9);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.header-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;
}


.site-logo {
  display: inline-flex;

  align-items: center;

  color:
    var(--color-text);

  font-size: 0.95rem;

  font-weight: 800;

  letter-spacing: -0.02em;
}


.site-logo::before {
  content: "";

  width: 26px;
  height: 26px;

  margin-right: 9px;

  border-radius: 8px;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      #8b84ff
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.3);
}


.main-navigation {
  display: none;

  align-items: center;

  gap: 28px;
}


.main-navigation a {
  color:
    var(--color-text-secondary);

  font-size: 0.9rem;

  font-weight: 600;

  transition:
    color
    var(--transition-fast);
}


.main-navigation a:hover {
  color:
    var(--color-text);
}


/* ============================================================
   7. BUTTONS
   ============================================================ */

.button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding:
    0 20px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--border-radius-small);

  font-size: 0.95rem;

  font-weight: 700;

  line-height: 1;

  text-align: center;

  transition:
    transform
    var(--transition-fast),
    background
    var(--transition-fast),
    border-color
    var(--transition-fast),
    box-shadow
    var(--transition-fast),
    color
    var(--transition-fast);
}


.button:hover {
  transform:
    translateY(-1px);
}


.button:active {
  transform:
    translateY(0);
}


.button-primary {
  color: #ffffff;

  background:
    var(--color-primary);

  box-shadow:
    0 7px 18px
    rgba(99, 91, 255, 0.2);
}


.button-primary:hover {
  background:
    var(--color-primary-dark);

  box-shadow:
    0 9px 22px
    rgba(99, 91, 255, 0.28);
}


.button-secondary {
  color:
    var(--color-text-secondary);

  background:
    var(--color-surface);

  border-color:
    var(--color-border);
}


.button-secondary:hover {
  color:
    var(--color-text);

  border-color:
    var(--color-border-dark);

  background:
    var(--color-surface-soft);
}


.button-full {
  width: 100%;
}


/* ============================================================
   8. HERO
   ============================================================ */

.hero {
  position: relative;

  overflow: hidden;

  padding:
    80px 0 72px;

  background:
    var(--color-background);
}


.hero::before {
  content: "";

  position: absolute;

  width: 380px;
  height: 380px;

  top: -200px;
  right: -180px;

  border-radius: 50%;

  background:
    rgba(99, 91, 255, 0.09);

  filter:
    blur(2px);

  pointer-events: none;
}


.hero::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  left: -160px;
  bottom: -150px;

  border-radius: 50%;

  background:
    rgba(99, 91, 255, 0.06);

  pointer-events: none;
}


.hero-content {
  position: relative;

  z-index: 1;

  max-width: 820px;

  text-align: center;
}


.hero .eyebrow {
  justify-content: center;
}


.hero h1 {
  max-width: 800px;

  margin:
    0 auto 22px;

  font-size: clamp(
    2.8rem,
    9vw,
    5.2rem
  );

  font-weight: 850;

  line-height: 0.98;

  letter-spacing: -0.055em;
}


.hero-description {
  max-width: 680px;

  margin:
    0 auto 30px;

  color:
    var(--color-text-secondary);

  font-size:
    clamp(
      1rem,
      2vw,
      1.18rem
    );

  line-height: 1.7;
}


.hero-cta {
  min-width: 190px;
}


/* ============================================================
   9. CALCULATOR SECTION
   ============================================================ */

.calculator-section {
  padding:
    var(--section-padding) 0;

  background:
    var(--color-surface);
}


.calculator-layout {
  display: grid;

  gap: 28px;
}


/* ============================================================
   10. CALCULATOR INPUTS
   ============================================================ */

.calculator-inputs {
  min-width: 0;
}


.calculator-form {
  display: flex;

  flex-direction: column;

  gap: 26px;
}


.form-group {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.form-group label {
  color:
    var(--color-text);

  font-size: 0.95rem;

  font-weight: 750;

  line-height: 1.35;
}


.input-help {
  margin: 0;

  color:
    var(--color-text-secondary);

  font-size: 0.82rem;

  line-height: 1.55;
}


.input-with-prefix,
.input-with-suffix {
  display: flex;

  align-items: stretch;

  width: 100%;

  min-height: 52px;

  overflow: hidden;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--border-radius-small);

  background:
    var(--color-surface);

  transition:
    border-color
    var(--transition-fast),
    box-shadow
    var(--transition-fast);
}


.input-with-prefix:focus-within,
.input-with-suffix:focus-within {
  border-color:
    var(--color-primary);

  box-shadow:
    0 0 0 4px
    rgba(99, 91, 255, 0.1);
}


.input-prefix,
.input-suffix {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  color:
    var(--color-text-muted);

  background:
    var(--color-surface-soft);

  font-size: 0.95rem;

  font-weight: 650;
}


.input-prefix {
  width: 48px;

  border-right:
    1px solid
    var(--color-border);
}


.input-suffix {
  min-width: 62px;

  padding:
    0 12px;

  border-left:
    1px solid
    var(--color-border);
}


.input-with-prefix input,
.input-with-suffix input {
  width: 100%;

  min-width: 0;

  padding:
    13px 15px;

  border: 0;

  outline: 0;

  color:
    var(--color-text);

  background:
    transparent;

  font-size: 1rem;

  font-weight: 650;
}


.input-with-prefix input::placeholder,
.input-with-suffix input::placeholder {
  color:
    var(--color-text-muted);
}


/* Remove browser number input arrows */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;

  -webkit-appearance: none;
}


input[type="number"] {
  -moz-appearance: textfield;
}


/* ============================================================
   11. CALCULATOR ERROR
   ============================================================ */

.calculator-error {
  padding:
    12px 14px;

  border:
    1px solid
    rgba(199, 55, 55, 0.2);

  border-radius:
    var(--border-radius-small);

  color:
    var(--color-error);

  background:
    var(--color-error-background);

  font-size: 0.85rem;

  line-height: 1.5;
}


.calculator-error[hidden] {
  display: none;
}


/* ============================================================
   12. RESULTS PANEL
   ============================================================ */

.calculator-results {
  min-width: 0;

  padding: 24px;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--border-radius-large);

  background:
    var(--color-background);

  box-shadow:
    var(--shadow-medium);
}


.results-header {
  margin-bottom: 22px;
}


.results-header h2 {
  margin-bottom: 8px;

  font-size: 1.55rem;

  line-height: 1.15;

  letter-spacing: -0.025em;
}


.results-header p:last-child {
  color:
    var(--color-text-secondary);

  font-size: 0.9rem;

  line-height: 1.55;
}


/* ============================================================
   13. RESULT CARDS
   ============================================================ */

.result-card {
  padding: 20px;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--border-radius-medium);

  background:
    var(--color-surface);

  box-shadow:
    var(--shadow-small);
}


.result-card-primary {
  margin-bottom: 12px;

  padding: 24px;

  border-color:
    rgba(99, 91, 255, 0.18);

  background:
    var(--color-primary-light);

  box-shadow:
    none;
}


.result-label {
  display: block;

  margin-bottom: 8px;

  color:
    var(--color-text-secondary);

  font-size: 0.78rem;

  font-weight: 750;

  letter-spacing: 0.02em;

  line-height: 1.35;

  text-transform: uppercase;
}


.result-card-primary .result-label {
  color:
    var(--color-primary-dark);
}


.result-value {
  display: block;

  color:
    var(--color-text);

  font-size: clamp(
    1.6rem,
    5vw,
    2.25rem
  );

  font-weight: 850;

  line-height: 1;

  letter-spacing: -0.045em;

  word-break: break-word;
}


.result-card-primary .result-value {
  color:
    var(--color-primary-dark);

  font-size: clamp(
    2.1rem,
    8vw,
    3.2rem
  );
}


.result-description {
  display: block;

  margin-top: 9px;

  color:
    var(--color-text-secondary);

  font-size: 0.78rem;

  line-height: 1.5;
}


.results-grid {
  display: grid;

  grid-template-columns:
    1fr;

  gap: 12px;
}


/* ============================================================
   14. RESULTS ACTIONS
   ============================================================ */

.results-actions {
  margin-top: 16px;
}


.copy-status {
  min-height: 22px;

  margin:
    9px 0 0;

  color:
    var(--color-success);

  font-size: 0.8rem;

  font-weight: 650;

  text-align: center;
}


.calculation-note {
  margin-top: 16px;

  padding:
    13px 14px;

  border-radius:
    var(--border-radius-small);

  background:
    var(--color-surface-soft);
}


.calculation-note p {
  color:
    var(--color-text-muted);

  font-size: 0.73rem;

  line-height: 1.55;
}


.calculation-note strong {
  color:
    var(--color-text-secondary);
}


/* ============================================================
   15. HOW IT WORKS
   ============================================================ */

.how-it-works-section {
  padding:
    var(--section-padding) 0;

  background:
    var(--color-background);
}


.explanation-grid {
  display: grid;

  gap: 16px;
}


.explanation-card {
  padding: 24px;

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--border-radius-medium);

  background:
    var(--color-surface);
}


.explanation-number {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 36px;
  height: 36px;

  margin-bottom: 20px;

  border-radius: 10px;

  color:
    var(--color-primary-dark);

  background:
    var(--color-primary-light);

  font-size: 0.75rem;

  font-weight: 800;
}


.explanation-card h3 {
  margin-bottom: 8px;

  font-size: 1.1rem;

  line-height: 1.3;

  letter-spacing: -0.015em;
}


.explanation-card p {
  color:
    var(--color-text-secondary);

  font-size: 0.9rem;

  line-height: 1.65;
}


/* ============================================================
   16. INPUT EXPLANATIONS
   ============================================================ */

.inputs-explained-section {
  padding:
    var(--section-padding) 0;

  background:
    var(--color-surface);
}


.input-explanation-list {
  display: grid;

  gap: 0;

  border-top:
    1px solid
    var(--color-border);
}


.input-explanation {
  padding:
    25px 0;

  border-bottom:
    1px solid
    var(--color-border);
}


.input-explanation h3 {
  margin-bottom: 8px;

  font-size: 1rem;

  line-height: 1.4;
}


.input-explanation p {
  color:
    var(--color-text-secondary);

  font-size: 0.9rem;

  line-height: 1.65;
}


.input-explanation p + p {
  margin-top: 10px;
}


.input-explanation strong {
  color:
    var(--color-text);
}


/* ============================================================
   17. CTA
   ============================================================ */

.cta-section {
  padding:
    64px 0;

  background:
    var(--color-background);
}


.cta-card {
  position: relative;

  overflow: hidden;

  padding:
    44px 24px;

  border-radius:
    var(--border-radius-large);

  color:
    #ffffff;

  background:
    #171a24;

  box-shadow:
    var(--shadow-large);

  text-align: center;
}


.cta-card::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  top: -190px;
  right: -80px;

  border-radius: 50%;

  background:
    rgba(99, 91, 255, 0.25);
}


.cta-card::after {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  bottom: -160px;
  left: -80px;

  border-radius: 50%;

  background:
    rgba(99, 91, 255, 0.18);
}


.cta-card > * {
  position: relative;

  z-index: 1;
}


.cta-card .eyebrow {
  color:
    #aaa5ff;
}


.cta-card .eyebrow::before {
  background:
    #aaa5ff;
}


.cta-card h2 {
  max-width: 700px;

  margin:
    0 auto 16px;

  font-size: clamp(
    2rem,
    6vw,
    3.25rem
  );

  line-height: 1.05;

  letter-spacing: -0.04em;
}


.cta-card > p:not(.eyebrow) {
  max-width: 650px;

  margin:
    0 auto 28px;

  color:
    #b7bbc7;

  font-size: 0.98rem;

  line-height: 1.7;
}


.cta-button {
  min-height: 52px;

  padding:
    0 22px;
}


/* ============================================================
   18. FAQ
   ============================================================ */

.faq-section {
  padding:
    var(--section-padding) 0;

  background:
    var(--color-surface);
}


.faq-list {
  max-width: 820px;

  border-top:
    1px solid
    var(--color-border);
}


.faq-item {
  border-bottom:
    1px solid
    var(--color-border);
}


.faq-item summary {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    21px 0;

  color:
    var(--color-text);

  font-size: 0.98rem;

  font-weight: 700;

  line-height: 1.45;

  list-style: none;

  cursor: pointer;
}


.faq-item summary::-webkit-details-marker {
  display: none;
}


.faq-item summary::after {
  content: "+";

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  width: 28px;
  height: 28px;

  border:
    1px solid
    var(--color-border);

  border-radius: 50%;

  color:
    var(--color-text-secondary);

  font-size: 1.15rem;

  font-weight: 400;

  line-height: 1;

  transition:
    transform
    var(--transition-normal),
    background
    var(--transition-normal);
}


.faq-item[open] summary::after {
  content: "−";

  color:
    var(--color-primary);

  background:
    var(--color-primary-light);

  border-color:
    rgba(99, 91, 255, 0.2);
}


.faq-answer {
  padding:
    0 48px 22px 0;
}


.faq-answer p {
  margin: 0;

  color:
    var(--color-text-secondary);

  font-size: 0.9rem;

  line-height: 1.7;
}


/* ============================================================
   19. FOOTER
   ============================================================ */

.site-footer {
  padding:
    50px 0 30px;

  border-top:
    1px solid
    var(--color-border);

  background:
    var(--color-background);
}


.footer-inner {
  display: grid;

  gap: 30px;
}


.footer-brand .site-logo {
  margin-bottom: 12px;
}


.footer-brand p {
  max-width: 330px;

  color:
    var(--color-text-secondary);

  font-size: 0.82rem;

  line-height: 1.6;
}


.footer-navigation {
  display: flex;

  flex-wrap: wrap;

  gap:
    10px 20px;
}


.footer-navigation a {
  color:
    var(--color-text-secondary);

  font-size: 0.82rem;

  font-weight: 600;

  transition:
    color
    var(--transition-fast);
}


.footer-navigation a:hover {
  color:
    var(--color-text);
}


.footer-legal {
  padding-top: 20px;

  border-top:
    1px solid
    var(--color-border);
}


.footer-legal p {
  color:
    var(--color-text-muted);

  font-size: 0.72rem;

  line-height: 1.6;
}


.footer-legal p + p {
  margin-top: 3px;
}


/* ============================================================
   20. NOSCRIPT
   ============================================================ */

.noscript-message {
  position: fixed;

  z-index: 1000;

  right: 16px;
  bottom: 16px;
  left: 16px;

  padding:
    14px 16px;

  border:
    1px solid
    rgba(199, 55, 55, 0.2);

  border-radius:
    var(--border-radius-small);

  color:
    var(--color-error);

  background:
    var(--color-error-background);

  box-shadow:
    var(--shadow-medium);
}


.noscript-message p {
  margin: 0;

  font-size: 0.85rem;

  line-height: 1.5;
}


/* ============================================================
   21. TABLET
   ============================================================ */

@media (min-width: 640px) {

  .container {
    width: min(
      calc(100% - 48px),
      var(--container-width)
    );
  }


  .hero {
    padding:
      105px 0 90px;
  }


  .calculator-results {
    padding: 30px;
  }


  .results-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .result-card {
    min-height: 140px;
  }


  .explanation-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .explanation-card {
    padding: 26px;
  }


  .cta-card {
    padding:
      64px 50px;
  }


  .footer-inner {
    grid-template-columns:
      1.5fr 1fr;

    align-items: start;
  }


  .footer-legal {
    grid-column:
      1 / -1;
  }

}


/* ============================================================
   22. DESKTOP
   ============================================================ */

@media (min-width: 900px) {

  :root {
    --section-padding: 100px;
  }


  .main-navigation {
    display: flex;
  }


  .hero {
    padding:
      130px 0 115px;
  }


  .calculator-layout {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(420px, 1.1fr);

    align-items: start;

    gap: 60px;
  }


  .calculator-results {
    position: sticky;

    top: 96px;
  }


  .results-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .input-explanation-list {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 60px;
  }


  .input-explanation {
    padding:
      28px 0;
  }


  .cta-card {
    padding:
      80px 70px;
  }


  .footer-inner {
    grid-template-columns:
      1.5fr 1fr 1.2fr;
  }


  .footer-legal {
    padding-top: 0;

    border-top: 0;

    text-align: right;
  }

}


/* ============================================================
   23. LARGE DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

  .hero h1 {
    font-size: 5.4rem;
  }


  .calculator-layout {
    gap: 80px;
  }


  .calculator-results {
    padding: 34px;
  }

}


/* ============================================================
   24. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
  }

}


/* ============================================================
   25. DARKER CONTRAST / PRINT
   ============================================================ */

@media print {

  .site-header,
  .main-navigation,
  .hero-cta,
  .results-actions,
  .cta-section,
  .site-footer {
    display: none !important;
  }


  body {
    background: #ffffff;
  }


  .calculator-section {
    padding: 0;
  }


  .calculator-layout {
    display: block;
  }


  .calculator-results {
    position: static;

    border: 0;

    box-shadow: none;
  }

}