/* ===== Global CSS for chatGPTkwr ===== */



:root {
    --yellow: #c0ff3a;
    --green: #00ffa3;
    --whitish: #fefefe;
    --blackish: #121212;
    --reddish: #e60000;
    --grey: #999999;
}

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

body {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  background: var(--blackish);
  display: flex;
  flex-direction: column;

  color: var(--whitish);
}

html, body {
    height: 100%;
    margin: 0;
    
}

/* ==== Hero Section ==== */
/* Soft radial background glow */
 .page-index .hero-section {
    height: auto;
    min-height: 650px;
    
    padding-top: 60px;
    padding-bottom: 0;     /* ⬅ reduce bottom padding */
    display: flex;
    align-items: center;
    

    background: radial-gradient(
        circle at 50% 60%,
        rgba(192, 255, 58, 0.10) 5%,   /* soft yellow */
        rgba(255, 255, 255, 0) 25%      /* fade to transparent */
    );

  position: relative;
  overflow: hidden;
}

/* hero section wavy background image */
.page-index .hero-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("../images/bg1.png") center / 60% no-repeat;
  opacity: 0.5;

  transform: translateY(60px);

  z-index: 1;
}

.hero-section .wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;


  position: relative;
  z-index: 2;
}


/* ===== H1 & H2 ===== */

.hero-section .normal {
    font-family: "Poppins", sans-serif;
    font-size: 54px;
    font-weight: bold;
    opacity: 0.9;
    background: linear-gradient(60deg, var(--whitish) 30%, var(--grey));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter:
    drop-shadow(0 0 60px rgba(254, 254, 254, 0.286))
    drop-shadow(0 0 20px rgba(254, 254, 254, 0.286));

    text-align: center;
    margin-bottom: 6px;
}

.hero-section .colored {
    font-family: "Poppins", sans-serif;
    font-size: 54px;
    font-weight: bold;
    opacity: 0.9;
    background: linear-gradient(60deg, var(--yellow) 30%, var(--green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter:
    drop-shadow(0 0 40px rgba(254, 254, 254, 0.286))
    drop-shadow(0 0 40px rgba(254, 254, 254, 0.286));
    
    text-align: center;
    margin-bottom: 6px;
}

h2 {
    font-family: "Poppins", sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-align: center;

    opacity: 0.9;
    background: linear-gradient(60deg, var(--whitish) 30%, var(--grey));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter:
    drop-shadow(1 3 20px rgba(254, 254, 254, 0.25));

    text-align: center;
}

.hero-section .subheader {
    font-family: "Source Sans 3", sans-serif;
    color: var(--whitish);
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 60px;
}

.hero-section h1 {
  margin-bottom: 8px;
}

.hero-section .subheader {
  max-width: 780px;
  margin: 0 auto 60px;
  line-height: 1.5;
}


/* ===== Header Bar ===== */

header {
    position: fixed;
    pointer-events: none;     /* prevents accidental overlap issues */

    top: 5px;
    left: 0;
    right: 0;
    z-index: 1000;

    width: 100%;
    height: 70px;  
    
    display: flex;
    align-items: center;      /* vertically center the content */
    justify-content: center;  /* center the nav container horizontally */
}



nav {
    pointer-events: auto;     /* re-enable interactions inside */

    width: 99%;
    height: 100%;
    top: 5px;
  
    padding: 0;
    border-radius: 12px;
    

    background: rgba(18, 18, 18, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    display: flex;
    align-items: center;   /* vertical centering of logo */
}

.logo-link img {
    width: auto;
    height: 80px;
    display: block;    
}



/* ==== Mini Nav ===== */
.mini-nav {
  font-size: 12px;
  margin-bottom: 16px;
  
  display: flex;
  gap: 10px;
  
  transform: translateX(95px);
}

.bulk-active {
  color: var(--yellow);
  font-weight: 300;
  text-decoration: none;
}

.bulk-single {
  color: #0075FF;
}

.nav-separator {
  opacity: 0.5;
  
}

.bulk-single {
  color: #0075FF;
  text-decoration: none;
  position: relative;
}

/* mini-nav hover animation */
.bulk-single::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #0075FF;
  transition: width 0.2s ease;
}

.bulk-single:hover::after {
  width: 90%;
}

/* mini-nav tool-tip hover */
.page-index .bulk-active:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -26px;
  left: 10px;

  background: rgba(255,255,255,0.95);
  color: var(--blackish);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}




/* ==== Query Box ===== */

/* Single Query Input box  */
.single-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  margin: 0 auto;
}


/* Outer box */
.query-box {
  width: 720px;
  height: 54px;
  margin: 0 auto;
  border: 2px dashed #dedfe0;
  border-radius: 8px;
  background: var(--whitish);
  box-shadow: 0 3px 12px #e7e7e956, inset 0 0 20px rgba(0,0,0,0.03);
  padding: 16px;
}

/* Hover glow */
.query-box:hover {
  border: 2px dashed transparent;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(60deg, var(--yellow), var(--green)) border-box;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08),
              inset 0 0 25px rgba(0,0,0,0.04);
}

/* Input */
#queryInput {
  width: 100%;
  border: none;
  outline: none;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  color: var(--blackish);
  background: transparent;
}

/* Placeholder */
#queryInput::placeholder {
  color: var(--grey);
  font-style: italic;
}

/* Disabled state */
.query-box.inactive {
  border: 2px dashed #dedfe0; 
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(#e5e5e5,#e5e5e5) border-box; 
  box-shadow: inset 0 0 20px rgba(0,0,0,0.03); 
  cursor: not-allowed;
}

.query-box.inactive * {
  pointer-events: none; /* inner contents unclickable */
}

.query-box.active {
  pointer-events: auto; 
}


/* ===== Input Error ===== */
.input-error {
    font-size: 11px;
    color: var(--reddish); /* soft red */
    margin-top: 0;
    margin-bottom: 0;

    min-height: 14px;        /* 👈 reserves space ALWAYS */
    line-height: 14px;

    text-align: left;
    width: 100%;
    max-width: 760px;        /* same as input width */

    transform: translate(25px, -5px);

}


/* ===== Button ===== */

/* Button Default State */
.analyze-btn, .try-btn {
    height: 40px; 
    width: 360px;
    color: white;

    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
    font-weight: 400;

    background: 
        linear-gradient(#111, #111) padding-box, 
        linear-gradient(60deg, var(--yellow), var(--green)) border-box;

    border: 2px solid transparent;
    border-radius: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}


/* Button Hover State */
.analyze-btn,
.try-btn {
    transition: all 0.2s ease;
}

/* Hover: float + shadow */
.analyze-btn:hover,
.try-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.22);
}

/* Active: press down */
.analyze-btn:active,
.try-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(255, 255, 255, 0.18);
}


/* Disabled / Loading */
.analyze-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==== Dektop vs Mobile view ====*/

/* Mobile Warning Preview */

.mobile-warning {
    display: none; /* hidden by default */
    width: 100%;
    padding: 40px 20px;
}

.mobile-warning-box {
    max-width: 360px;
    margin: 60px auto;
    padding: 24px 20px;
    background: #fff;
    border-radius: 12px;

    box-shadow:
        0 3px 12px #e7e7e9,
        inset 0 0 20px rgba(0,0,0,0.03);

    border: 1px solid #f0f0f0;
    text-align: center;
}

.mobile-warning-box h2 {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 14px;
    color: #181818;
}

.mobile-warning-box p {
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    margin: 0 0 10px;
}

/* Default: desktop */
.desktop-only {
  display: block;
}

.mobile-warning {
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-warning {
    display: block;
  }

  body {
    overflow: hidden; /* prevents any ghost scrolling */
  }
}



/* For all pages except 404 page */
@media (max-width: 768px) {
    main,
    header,
    footer {
        display: none;
    }

    .mobile-warning {
        display: block;
    }
}



/* =====================================
   Single Results Section
   ===================================== */


.results-section {
  width: 100%;
  padding: 92px 0 48px;   /* controls vertical breathing room */
  background: transparent;
}



.results-wrapper {
  max-width: 950px;
  margin: 0 auto;
  padding: 36px;

  background: #F7F7F9;  
  border-radius: 8px;
  
  box-shadow: 0 3px 12px #e7e7e956, inset 0 0 20px rgba(0,0,0,0.03);
}



/* ===== Result Header + CCP + Middle Text + Screenshot Button ==== */
.results-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  gap: 28px;

  padding: 22px 22px;
  margin-bottom: 20px;

  background: var(--blackish);
  border-radius: 6px;
  color: var(--whitish);
}


/* CCP Container */

/* CCP Big number */
.ccp-percent {
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}

/* CCP Smaller % */
.percent-symbol {
  font-size: 22px;
  margin-left: 6px;
  line-height: 1;

  /* optical nudge */
  transform: translateY(-2px);
}





/* Middle Text */
.header-ccp-middle {
  text-align: left;
  font-size: 20px;
  line-height: 1.4;
}


/* Screenshot Button */

.screenshot-btn {
  background: linear-gradient(60deg, var(--yellow) 30%, var(--green));
  border: none;
  width: 64px;
  height: 56px;
  border-radius: 8px;
  cursor: pointer;
  padding-top: 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

/* Hover: lift + glow */
.screenshot-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(192, 192, 192, 0.35),
    0 0 18px rgba(170, 255, 70, 0.45);
}

/* Active: pressed */
.screenshot-btn:active {
  transform: translateY(0);
  box-shadow:
    0 3px 10px rgba(192, 192, 192, 0.35),
    0 0 14px rgba(170, 255, 70, 0.6);
}

/* Icon safety */
.screenshot-btn img {
  display: block;
}


/* ==== Screenshot Mechanism to show/hide branding and legend ==== */
/* Hidden in normal UI */
.screenshot-branding,
.screenshot-legend {
  display: none;
}

/* Only visible during screenshot */
.screenshot-mode .screenshot-branding,
.screenshot-mode .screenshot-legend {
  display: block;
}

/* Screenshot-only cleanup */
.screenshot-mode .copy-btn,
.screenshot-mode #screenshotBtn {
  display: none !important;
}

/* Screenshot background, branding and legends styling */
.results-section.screenshot-mode {
  background: var(--blackish);
  padding: 28px 0 36px;
}

/* Branding header */
.results-section.screenshot-mode .screenshot-branding {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 950px;
  line-height: 1.3;

  margin: 0 auto;
  padding: 0;

  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  color: var(--whitish);
}

.screenshot-branding img {
  height: 36px;            /* CHANGE: visual size without layout explosion */
  width: auto;

  display: inline-block;   /* IMPORTANT: baseline alignment */
  vertical-align: baseline;
  flex-shrink: 0;

  transform: translateY(4px); /* ← tweak between 1–3px if needed */
}



/* Legend footer */
.results-section.screenshot-mode .screenshot-legend {
  display: block;
  max-width: 950px;
  margin: 0 auto;
  padding: 0;

  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--whitish);
}

/* Hide interactive UI during screenshot */
.results-section.screenshot-mode .copy-btn,
.results-section.screenshot-mode .screenshot-btn,
.results-section.screenshot-mode .results-reset {
  display: none !important;
}





/* ==== Result Cells - Left and Right Labels + Copy Button ==== */

.results-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: stretch;
  gap: 14px;
}


/* Left Labels */
.result-label {
  background: #ffffff;
  color: var(--blackish);
  font-weight: 400;
  font-size: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;

  max-width: 190px;
  min-height: 52px;

  /* CHANGE: subtle elevation */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}


/* CHANGE: force proper superscript rendering */
.result-label sup {
  font-size: 11px;
  vertical-align: super;
  line-height: 0;
  margin-left: 4px;
}


/* Right Labels */

.result-cell {
  background: #ffffff;  
  color: var(--blackish);
  font-weight: 400;
  font-size: 14px;

  border-radius: 6px;
  padding: 10px 20px;

  max-width: 674px;
  min-height: 52px;

  /* CHANGE: subtle elevation */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}


.result-cell-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  height: 100%;

  align-items: start;
}

/* list of results */
.result-list-wrapper {
  overflow-y: auto;
  padding-right: 12px;
}

.result-list {
  margin: 0;
  padding-left: 12px;
  font-size: 14px;
  line-height: 1.4;
}


/* ==== Copy Button ==== */
.result-copy-wrapper {
  display: flex;
  align-items: flex-start;
}


.copy-btn {
  background: transparent;
  width: 16px;
  height: 16px;

  border: none;
  cursor: pointer;

  padding: 4px;
  border-radius: 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.16s ease;
}



.copy-btn img {
  width: 14px;
  height: 14px;
}

/* Hover: lift + soft glow */
.copy-btn:hover {
  background: rgba(169, 255, 70, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 2px 16px rgba(169, 255, 70, 0.75);
}

/* Copied state (JS already adds .copied) */
.copy-btn.copied {
  background: rgba(169, 255, 70, 0.45);
  box-shadow: 0 0 10px rgba(169, 255, 70, 0.75);
  transform: scale(0.92);
}


/* Reset Button below the Single Query Result Table */
.results-reset {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* Reset Button Default State */
.reset-btn {
    height: 40px; 
    width: 360px;
    color: white;

    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
    font-weight: 400;

    background: 
        linear-gradient(#111, #111) padding-box, 
        linear-gradient(60deg, var(--yellow), var(--green)) border-box;

    border: 2px solid transparent;
    border-radius: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}


/* Reset Button Hover State */
.reset-btn {
    transition: all 0.2s ease;
}

/* Reset Hover: float + shadow */
.reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.22);
}

/* Active: press down */
.reset-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(255, 255, 255, 0.18);
}


/* Disabled / Loading */
.reset-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}




/* ===== Screenshot Mode ===== */
/* Applied only during screenshot capture */

.screenshot-mode .copy-btn,
.screenshot-mode .result-copy-wrapper,
.screenshot-mode .screenshot-btn,
.screenshot-mode .results-reset {
  display: none !important;
}







































/* ===========================================
   Tutorial Section 
   =========================================== */
.tutorial-section {
    width: 100%;
    height: 600px;
    padding: 110px 0;          /* vertical spacing */
    position: relative;

    margin-top: 0;

    /* Soft radial background glow */
    background: radial-gradient(
        circle at 50% 60%,
        rgba(193, 255, 58, 0.041) 5%,   /* soft yellow */
        rgba(255, 255, 255, 0) 15%      /* fade to transparent */
    );
}

/* Wrapper: constrains content to 900px & aligns L/R columns */
.tutorial-section .tutorial-content {
    max-width: 900px;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 145px;                /* space between text and video */
}

/* ===== Left Column - Written Instruction ===== */
.tutorial-left {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* <-- THIS makes the text centered vertically */
    height: 276px;             /* <-- MATCH video height! */
    max-width: 374px;
}

.bullet {
    margin-left: 0px;
    margin-bottom: 24px;       /* spacing between bullet groups */
}

/* Step Title */
.pointer {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 6px 0;
}

/* Step Description */
.description {
    max-width: 304px;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* ===== Right Column - YouTube Embed ===== */

.tutorial-right {
    display: flex;
    align-items: flex-end;
    max-width: 374px;
}  

.video-container {
    width: 374px;
    height: 250px;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;

    box-shadow: 0 2px 10px #e7e9e731, inset 0 0 10px rgba(0,0,0,0.03);
}

/* YouTube iframe */
.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}



/* =====================================
   FAQ Section (Accordion)
   ===================================== */

.faq-section {
    width: 100%;
    padding: 160px 0 120px;

    background: radial-gradient(
        circle at center,
        rgba(192, 255, 58, 0.10) 5%,   /* soft yellow */
        rgba(255, 255, 255, 0) 25%      /* fade to transparent */
    );
}

.faq-section .wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.all-faqs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

/* ===== Card Container ===== */

.faq {
    width: 100%;
    max-width: 800px;
    background: var(--whitish);
    border-radius: 6px;
    border: 1px solid #f7f7f9;

    box-shadow: 0 3px 12px #e7e7e956, inset 0 0 20px rgba(0,0,0,0.03);


    overflow: hidden; /* smooth animation */
    transition: 0.5s ease-in-out;
}

/* ===== Summary (Questions) ===== */

.faq summary {
    padding: 22px 48px 22px 22px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--blackish);

    cursor: pointer;
    list-style: none;
    position: relative;
}

/* Remove default triangle */
.faq summary::-webkit-details-marker {
    display: none;
}

/* Custom arrow */
.faq summary::after {
    content: "›";
    font-size: 24px;
    font-weight: 300;
    position: absolute;
    right: 22px;
    top: 22px;

    transform: rotate(90deg);
    transition: transform 0.55s ease;
    color: var(--blackish);
}

/* Rotate arrow when open */
.faq[open] summary::after {
    transform: rotate(270deg);
}

/* ===== Answer Text ===== */

.faq .answer {
    padding: 0 48px 22px 22px;
    margin: 0;

    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--blackish);
}

/* Smooth open animation */
.faq[open] .answer {
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}   



/* =====================================
   Footer Section
   ====================================== */
   footer {
    width: 100%;
    max-height: 54px;
    background: var(--blackish);
    color: var(--whitish);
    padding: 14px 60px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* true centering */
    align-items: center;
    gap: 40px;

    font-family: "Source Sanns 3", sans-serif;
}

/* Left side links */
.footer-left {
    font-size: 14px;
    font-weight: 200;
    font-style: italic;
    white-space: nowrap;
}

/* Center LinkedIn icon */
.footer-center a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-linkedin {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Right side links */
.footer-right {
    display: flex;
    justify-content: flex-end; 
    gap: 40px;

}

.footer-right a {
    color: var(--whitish);
    text-decoration: none;
    font-size: 14px;
    font-weight: 200;
    position: relative;
}

/* Animated underline */
.footer-right a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background: var(--whitish);
    transition: width 0.25s ease;
}

.footer-right a:hover::after {
    width: 100%;
}

/* Left-side footer navigation */
.footer-left {
    font-style: normal;   /* remove italics */
    display: flex;
    gap: 40px;
    white-space: nowrap;
}

/* Match link styling from right side */
.footer-left a {
    color: var(--whitish);
    text-decoration: none;
    font-size: 14px;
    font-weight: 200;
    position: relative;
}

/* Reuse underline animation */
.footer-left a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background: var(--whitish);
    transition: width 0.25s ease;
}

.footer-left a:hover::after {
    width: 100%;
}


/* For footer glow that separates its black from the page's black */

footer {
  position: relative; /* required for ::before */
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );

  box-shadow:
    0 -2px 6px rgba(255, 255, 255, 0.25);

  pointer-events: none;
}









































/* ==========================================================================
==========================================================================

                            BULK PAGE STYLING

==========================================================================
========================================================================== */


/* ==== Bulk hero — background image and glow ==== */

/* Decouple content from background */
.page-bulk .hero-section {
  display: block;          /* ⬅ not flex */
  padding-top: 80px;       /* controls content position */
}

.page-bulk .hero-section .wrapper {
  position: relative;
  z-index: 2;
}



/* Background green glow */
.page-bulk .hero-section {
  background: radial-gradient(
    circle at 55% 70%,   /* ⬅ move glow DOWN */
    rgba(192, 255, 58, 0.10) 5%,
    rgba(255, 255, 255, 0) 30%
  );
}

/* Background image */
.page-bulk .hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/bg2.png") 45% / 60% no-repeat;
  opacity: 0.15;
  z-index: 1;

  transform: translateY(20px); 

}


/* Bulk mini-nav tool-tip hover */
.page-bulk .bulk-active:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -26px;
  left: 110px;

  background: rgba(255,255,255,0.95);
  color: var(--blackish);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}



/* ===== Bulk Query Box (Textarea version of query-box) ===== */

.bulk-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bulk-input-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Locking the Text Area */
.bulk-textarea {
  width: 100%;
  height: 100%;

  border: none;
  outline: none;
  resize: none;              /* ⬅ critical */
  
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--blackish);

  background: transparent;
}

/* Bulk Area Placeholder */
.bulk-textarea::placeholder {
  color: var(--grey);
  font-style: italic;
}


/* ==== Bulk Area Button ==== */
.action-btn {
  margin: 0 auto;
}



/* ==== Bulk Area States Toggle - Processing, Done, Error */

/* Make .bulk-query-box the hard boundary */
.bulk-query-box {
  width: 720px;
  height: 186px;
  margin: 0 auto;

  border: 2px dashed #dedfe0;
  border-radius: 8px;
  background: var(--whitish);

  box-shadow: 0 3px 12px #e7e7e956,
              inset 0 0 20px rgba(0,0,0,0.03);

  padding: 16px;
  position: relative;     /* CONTAINMENT */
  overflow: hidden;       /* NO SPILL */
}


/* Hover + focus glow (idle only) */
.bulk-query-box:hover,
.bulk-query-box:focus-within {
  border: 2px dashed transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(60deg, var(--yellow), var(--green)) border-box;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08),
              inset 0 0 25px rgba(0,0,0,0.04);
}



/* Wrapper becomes state-only */
.bulk-input-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}


/* Textarea (base layer) */
.bulk-textarea {
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  outline: none;
  background: transparent;

  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--blackish);
}


/* Overlay (covers box, blocks input ONLY) */
.bulk-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 2;
  display: none;
}


/* Status container (processing / done / error) */

.bulk-status {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 24px;   /* Figma top gap */
  text-align: center;

  z-index: 3;
  pointer-events: none;
  cursor: not-allowed;
}

.bulk-status-item {
  display: none;
  font-size: 12px;
  font-family: "Source Sans 3", sans-serif;
  color: var(--blackish);
  padding: 0 auto;
  margin: 0 auto;
  text-align: center;
}


/* Deafult Cat size + spacing */
.bulk-status-item img {
  height: 72px;
  width: auto;
  margin: 0 auto;
}

.bulk-status p {
  margin: 0;              /* kill default browser margins */
}


.status-done .bulk-done {
  font-size: 22px;              /* big */
  font-weight: 700;
  color: var(--green);          /* your brand green */
  margin: 0 auto;
  padding: 0 auto;
  line-height: 1; 
}

/* DONE helper text */
.status-done p:not(.bulk-done) {
    margin-top: 2px;
}





/* State → visibility rules (the money shot) */
/* Hide textarea when overlay is active */
.state-processing .bulk-textarea,
.state-done .bulk-textarea,
.state-error .bulk-textarea {
  visibility: hidden;
}

/* Show overlay */
.state-processing .bulk-overlay,
.state-done .bulk-overlay,
.state-error .bulk-overlay {
  display: block;
}

/* Show correct state content */
.state-processing .status-processing { display: block; }
.state-done .status-done { display: block; }
.state-error .status-error { display: block; }


/* Disable glow + cursor during overlay */
.state-processing + .bulk-query-box,
.state-done + .bulk-query-box,
.state-error + .bulk-query-box {
  pointer-events: none;
  cursor: not-allowed;
}


/* Process State - Cat Blink */
@keyframes catBlink {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.44; }
}

.status-processing img {
  animation: catBlink 1.2s infinite ease-in-out;
}

/* Allowing to click Download Again link in the Done state */
.state-done .bulk-status {
  pointer-events: auto;
  cursor: default;
}

.state-done .bulk-status a {
  pointer-events: auto;
  cursor: pointer;
}




/* =====================================
   Bulk Page Tutorial Section
   ====================================== */

   /* Adding addional padding that was lost in copy-pasting from the index.html */
   .page-bulk .tutorial-section {
  margin-top: 80px;
}







































/* ==========================================================================
==========================================================================

                            ABOUT PAGE STYLING

==========================================================================
========================================================================== */

/* ======================================================
   ABOUT PAGE — GLOBAL SCOPE
   ====================================================== */

.page-about {
  background: var(--blackish);
  color: var(--whitish);
}

/* Kill inherited hero assumptions */
.page-about section {
  position: relative;
  overflow: hidden;
}


/* ======================================================
   ABOUT — HERO / THE PRODUCT
   ====================================================== */

.page-about .about-hero-section {
  width: 100%;
  padding: 140px 24px 100px;

  position: relative;
  z-index: 1;
  overflow: hidden;

  /* Controlled glow — visual only */
  background: radial-gradient(
        circle at 50% 55%,
        rgba(192, 255, 58, 0.10) 5%,   /* soft yellow */
        rgba(255, 255, 255, 0) 25%      /* fade to transparent */
  );
}

.page-about .about-hero-section::before {
  z-index: 0;   /* ⬅ critical */
}

.page-about .about-hero-content {
  position: relative;
  z-index: 2;
}

.page-about .about-wrapper {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow */
.page-about .about-hero-content .title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  letter-spacing: 0.2px;
  font-weight: 600;
  color: var(--grey);
  margin: 0;
}

/* Heading */
.page-about .about-hero-content .heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.page-about .about-hero-content .heading img {
  width: 48px;                /* ← optically matches 42px text */
  height: auto;
}

.page-about .about-hero-content h2 {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 400;
  margin: 0;
  color: var(--whitish);
}

/* Body copy */
.page-about .about-hero-content .info-description {
  max-width: 640px;
  margin: 0 auto 44px;

  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--whitish);
}

.page-about .about-hero-content .info-description p {
  margin: 0 0 16px;
}

.page-about .about-hero-content .info-description a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 163, 0.35);
}

/* Centering the Try Button */
.page-about .about-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-about .try-btn {
  padding: 0 auto;  
  margin-top: -28px;           /* replaces visual gap */
  align-self: center;          /* hard center */
}



/* ======================================================
   ABOUT — VIDEO
   ====================================================== */

.page-about .about-video-section {
  padding: 40px 24px 120px;
  display: flex;
  justify-content: center;
}

.page-about .about-video-wrapper {
  width: 100%;
  max-width: 820px;   /* ⬅ make it wide like your screenshot */
}


.page-about .about-video-container {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;

  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 10px 40px rgba(0, 255, 163, 0.08);

}

.page-about .about-video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ======================================================
   ABOUT — WHY / HOW
   ====================================================== */

.page-about .info1-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;

  display: flex;
  justify-content: center;
  gap: 100px;
}

.page-about .info-wrapper {
  max-width: 420px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-about .info-wrapper .title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--grey);
  margin-bottom: 0px;
}

.page-about .info-wrapper .heading {
  display: flex;
  align-items: center;
  justify-content: center; 
  gap: 12px;
  margin-bottom: 20px;
}

.page-about .info-wrapper h2.info {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--whitish);
  margin: 0;
}

.page-about .info-wrapper .info-description {
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--whitish);
}


/* ======================================================
   ABOUT — WHO
   ====================================================== */

.page-about .info2-section {
  padding: 0 24px 140px;
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.page-about .who-box {
  width: 420px;

  background: var(--whitish);
  border-radius: 8px;
  padding: 12px 28px;

  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.page-about .who-image img {
  width: 92px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.page-about .who-details {
  color: var(--blackish);
  text-align: left;
}

.page-about .who-details h3 {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 400;
  margin: 0 auto;
  padding: 0 auto;
}

.page-about .who-details .info-description {
  font-size: 14px;
  font-weight: 400;
  color: var(--blackish);
  margin: 0 auto 6px;
  padding: 0 auto;
}

.page-about .contact-icons {
  display: flex;
  gap: 12px;
  margin: 0 auto;
  padding: 0 auto;
  line-height: 0;   /* ← this is the key */

  align-items: flex-start;
}

.page-about .contact-icons img {
  width: 20px;
  height: auto;
  margin: 0 auto;
  padding: 0 auto;
  object-fit: cover;

  display: block;
}

.contact-icons img[src*="linkedin"] {
  transform: translateY(-2px);
}




/* ======================================================
   ABOUT — FAQ
   ====================================================== */

.page-about .faq-section {
  margin-top: 80px;
  padding-top: 0;

  background: radial-gradient(
        circle at 50% 60%,
        rgba(192, 255, 58, 0.10) 5%,   /* soft yellow */
        rgba(255, 255, 255, 0) 25%      /* fade to transparent */
}