/* ==========================================================================
   Qucetra public website  (QMS.MVC/Views/Website)
   Converted from the Claude Design "Qucetra Website" file. Layout and colours
   live inline in the views, exactly as designed; this file holds what inline
   styles cannot express: fonts, resets, hover states, the phone frame and a
   few small-screen safeguards.
   ========================================================================== */

/* ---- 1. Plus Jakarta Sans (variable, 400–800), shipped with the site ---- */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- 2. Base (verbatim from the design) ---- */
body{margin:0;background:#ffffff;font-family:'Plus Jakarta Sans',sans-serif;color:#0f172a;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:#2563eb;text-decoration:none}a:hover{color:#1d4ed8}
h1,h2,h3,h4,p,ul{margin:0}ul{padding:0;list-style:none}button{font:inherit;cursor:pointer}input,textarea,select{font:inherit}
@keyframes qfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
*,*::before,*::after{box-sizing:border-box}
/* The design has no global border-box: its 1200px page containers get their 24px gutters outside the max-width (1200px of content). Inline border-box containers keep theirs. */
[style*="max-width:1200px"]{box-sizing:content-box}
img{max-width:100%}
[hidden]{display:none !important}
input:focus,select:focus,textarea:focus{outline:2px solid #2563eb;outline-offset:1px}

/* ---- 3. Hover states (the design's style-hover attributes) ---- */
.qs-h1:hover{background:#eef2ff !important;color:#1e40af !important}
.qs-h2:hover{background:#1d4ed8 !important;color:#fff !important;transform:translateY(-1px) !important;box-shadow:0 10px 22px rgba(37,99,235,.35) !important}
.qs-h3:hover{background:#1d4ed8 !important;color:#fff !important;transform:translateY(-2px) !important;box-shadow:0 16px 36px rgba(37,99,235,.45) !important}
.qs-h4:hover{border-color:#2563eb !important;color:#2563eb !important}
.qs-h5:hover{border-color:#0f172a !important}
.qs-h6:hover{background:#f1f4f9 !important;color:#0f172a !important}
.qs-h7:hover{background:#f1f4f9 !important;color:#5b21b6 !important}
.qs-h8:hover{background:#f1f4f9 !important;color:#0f766e !important}
.qs-h9:hover{background:#f1f4f9 !important;color:#9a3412 !important}
.qs-h10:hover{background:#f1f4f9 !important;color:#991b1b !important}
.qs-h11:hover{background:#f1f4f9 !important;color:#1e293b !important}
.qs-h12:hover{background:#1e293b !important}
.qs-h13:hover{transform:translateY(-4px) !important;box-shadow:0 20px 40px rgba(15,23,42,.08) !important}
.qs-h14:hover{transform:translateY(-4px) !important;box-shadow:0 24px 48px rgba(15,23,42,.14) !important}
.qs-h15:hover{background:#dbeafe !important;color:#1e40af !important;transform:translateY(-2px) !important}
.qs-h16:hover{background:#1d4ed8 !important;color:#fff !important;transform:translateY(-2px) !important}
.qs-h17:hover{background:#1e293b !important;color:#fff !important}
.qs-h18:hover{color:#2563eb !important}
.qs-h19:hover{background:#1d4ed8 !important;color:#fff !important}
.qs-h20:hover{border-color:#bfdbfe !important}
.qs-h21:hover{background:#dbeafe !important;color:#1e40af !important}
.qs-h22:hover{color:#dbeafe !important}
.qs-h23:hover{color:#fff !important}
.qs-h24:hover{background:#1d4ed8 !important}

/* ---- 4. iOS device frame used by the "Mobile app" section (replaces the design's IOSDevice component) ---- */
.qs-phone{width:402px;height:874px;max-width:100%;border-radius:48px;overflow:hidden;position:relative;background:#F2F2F7;box-shadow:0 40px 80px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.12);font-family:-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;flex:0 0 auto}
.qs-phone-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:126px;height:37px;border-radius:24px;background:#000;z-index:50}
.qs-phone-status{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;gap:154px;align-items:center;justify-content:center;padding:21px 24px 19px;width:100%}
.qs-phone-time{flex:1;height:22px;display:flex;align-items:center;justify-content:center;padding-top:1.5px}
.qs-phone-time span{font-family:-apple-system,"SF Pro",system-ui;font-weight:590;font-size:17px;line-height:22px;color:#000}
.qs-phone-icons{flex:1;height:22px;display:flex;align-items:center;justify-content:center;gap:7px;padding-top:1px;padding-right:1px}
.qs-phone-body{height:100%;display:flex;flex-direction:column}
.qs-phone-nav{display:flex;flex-direction:column;gap:10px;padding-top:62px;padding-bottom:10px;position:relative;z-index:5}
.qs-phone-pills{display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.qs-phone-pill{height:44px;min-width:44px;border-radius:9999px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 4px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.07),0 3px 10px rgba(0,0,0,.06),inset 1.5px 1.5px 1px rgba(255,255,255,.7),inset -1px -1px 1px rgba(255,255,255,.4)}
.qs-phone-pill svg{display:block}
.qs-phone-title{padding:0 16px;font-family:-apple-system,system-ui;font-size:34px;font-weight:700;line-height:41px;color:#000;letter-spacing:.4px}
.qs-phone-content{flex:1;overflow:auto;min-height:0}
.qs-phone-home{position:absolute;bottom:0;left:0;right:0;z-index:60;height:34px;display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px;pointer-events:none}
.qs-phone-home span{width:139px;height:5px;border-radius:100px;background:rgba(0,0,0,.25)}

/* ---- 5. Small-screen safeguards (the design is desktop-first; these only stop overflow on phones) ---- */
@media (max-width:640px){
  h1{font-size:clamp(34px,10vw,48px) !important}
  h2{font-size:clamp(26px,7vw,34px) !important}
  .qs-footer-grid{grid-template-columns:1fr !important}
}

/* ---- 6. Header: hamburger menu on small screens ---- */
.qs-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.qs-nav-toggle span{display:block;width:20px;height:2px;margin:0 auto;border-radius:2px;background:#0f172a;transition:transform .2s,opacity .2s}
.qs-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.qs-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.qs-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  .qs-nav-inner{flex-wrap:wrap !important;gap:12px !important;padding:12px 16px !important}
  .qs-nav-toggle{display:flex}
  .qs-nav-links,.qs-nav-cta{display:none !important}
  .qs-nav-inner.is-open .qs-nav-links{display:flex !important;flex-direction:column;flex-basis:100%;gap:2px !important;margin:4px 0 0 !important;padding-top:12px;border-top:1px solid #e2e8f0}
  .qs-nav-inner.is-open .qs-nav-links a{padding:12px 14px !important;font-size:15px !important}
  .qs-nav-inner.is-open .qs-nav-cta{display:flex !important;flex-basis:100%;margin:4px 0 4px !important}
  .qs-nav-inner.is-open .qs-nav-cta a{flex:1;padding:12px 18px !important}
}

/* ---- 7. Small-screen layout fixes for sections that wrapped raggedly or overflowed on phones ---- */
.qs-slide-arrow{display:none;flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid #e2e8f0;background:#fff;color:#0f172a;font-size:18px;align-items:center;justify-content:center;padding:0}
@media (max-width:640px){
  /* Stat rows (home strip, features/about hero): compact three-across strip with dividers instead of a 2 + 1 split */
  .qs-stats-row{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:0 !important;padding:22px 8px !important}
  .qs-stats-row > div{padding:0 8px;min-width:0}
  .qs-stats-row > div + div{border-left:1px solid #e2e8f0}
  .qs-stats-row > div > div:first-child{font-size:24px !important}
  .qs-stats-row > div > div:last-child{font-size:12px !important;line-height:1.3;text-wrap:balance}
  .qs-hero-stats{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 !important}
  .qs-hero-stats > div{min-width:0;padding:0 10px}
  .qs-hero-stats > div:first-child{padding-left:0}
  .qs-hero-stats > div + div{border-left:1px solid #e2e8f0}
  .qs-hero-stats > div > div:first-child{font-size:22px !important}
  .qs-hero-stats > div > div:last-child{font-size:12px !important;line-height:1.3}
  /* Home module slider tabs: only the active pill, with previous/next arrows beside it */
  .qs-slide-tabbar{display:flex;align-items:center;gap:8px}
  .qs-slide-arrow{display:flex}
  .qs-slide-tabs{flex:1;min-width:0}
  .qs-slide-tabs button{display:none !important}
  .qs-slide-tabs button[aria-selected="true"]{display:flex !important;width:100%;justify-content:center;padding:10px 14px !important}
  /* Home "Foundations" card: title, pills and link stack */
  .qs-foundations{flex-direction:column;align-items:stretch !important;gap:14px !important}
  .qs-foundations > div{flex:1 1 auto !important}
  /* Features hero floating badge stays inside the card */
  .qs-float-badge{right:0 !important;top:-18px !important;font-size:12px !important;padding:10px 12px !important}
  /* Pricing comparison: first column stays visible while the table scrolls sideways */
  .qs-compare::before{content:"Swipe sideways to compare plans \2192";display:block;padding:10px 18px 0;font-size:12px;font-weight:600;color:#64748b}
  .qs-compare th:first-child,.qs-compare td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 #e2e8f0}
  /* Customers before/after rows: title, bars and delta stack */
  .qs-ba-row{grid-template-columns:1fr !important;gap:14px !important}
  .qs-ba-row > :last-child{justify-self:start}
  /* Case-study stat tiles: old value above new value, never mid-value wraps */
  .qs-case-stats > div > div:last-child{flex-direction:column;align-items:flex-start !important;gap:0 !important}
  .qs-case-stats span{white-space:nowrap}
  /* Timelines (customers, about): one card per row instead of two columns with an orphan */
  .qs-timeline{grid-template-columns:1fr !important}
}

/* ---- 8. Features modules: once the two-column grid collapses to one column (measured: two columns from 720px up),
   the text column (with its "See it in a demo" link) always comes first and the mockup follows it ---- */
@media (max-width:719px){
  .qs-module-grid > div:first-child{order:-1 !important}
}
/* Home module slider tabs: always one line. Wide screens fit all six; tablet widths scroll the strip sideways (phones use the arrows above). */
@media (min-width:641px) and (max-width:1247px){
  .qs-slide-tabs{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .qs-slide-tabs::-webkit-scrollbar{display:none}
  .qs-slide-tabs button{flex:0 0 auto;white-space:nowrap}
}