/* Theme variables */
    :root {
      --bg: #fbf8f2; /* warm off-white */
      --surface: #ffffff;
      --line: #e7e5e4;
      --text: #374151;
      --muted: #6b7280;
      --accent: #cfa24a;
      --accent2: #927747;
      --turquoise: #2a9d8f;
      --shadow: 0 14px 40px rgba(0, 0, 0, 0.10);
      --radius: 16px;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
      color: #222;
    }

    /* Native inspired accent bar */
    .accent-bar {
      height: 56px;
      background-image: url('img/pattern_strip.jpg');
      background-repeat: repeat-x;
      background-size: auto 100%;
      background-position: center;
      border-top: 1px solid rgba(0,0,0,0.04);
      border-bottom: 1px solid rgba(0,0,0,0.04);
    }

    /* Navbar */
    .navbar {
      backdrop-filter: blur(6px);
      background: rgba(255,255,255,0.85);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .nav-link {
      font-weight: 500;
      color: var(--text);
    }

    .nav-link:hover {
      color: var(--accent);
    }

    /* Hero section */
    .hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 5rem 1rem;
      color: #fff;
      background: none;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.32) 50%,
        rgba(0,0,0,0.55) 100%
      );
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 750px;
    }

    .hero-img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:0;
    }

    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: .5rem;
      letter-spacing: -0.02em;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    }

    .hero p {
      font-size: 1.1rem;
      margin-bottom: 1.5rem;
      color: #f8f9fa;
      text-shadow: 0 2px 8px rgba(0,0,0,0.40);
    }

    .btn-brand {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff;
      border: none;
    }

    .btn-brand:hover {
      filter: brightness(0.97);
      color: #fff;
    }

    .btn-outline {
      border: 1px solid var(--accent2);
      color: var(--accent2);
      background: rgba(207, 162, 74, 0.12);
    }

    .btn-outline:hover {
      background: var(--accent2);
      color: #fff;
    }

    /* Hero secondary buttons */
    .btn-hero-alt{
      border: 1px solid rgba(255,255,255,0.35);
      color: #fff;
      background: rgba(145, 122, 70, 0.55);
      box-shadow: 0 10px 24px rgba(0,0,0,0.18);
      backdrop-filter: blur(6px);
    }

    .btn-hero-alt:hover,
    .btn-hero-alt:focus{
      background: rgba(145, 122, 70, 0.78);
      border-color: rgba(255,255,255,0.45);
      color: #fff;
    }

    /* Cards & sections */
    .section {
      padding: 4rem 0;
    }

    .card-soft {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 1rem;
    }

    .eyebrow {
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: .75rem;
      color: var(--muted);
      margin-bottom: 0.5rem;
    }

    .muted {
      color: var(--muted);
    }

    .icon-circle {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent2);
      background: rgba(207, 162, 74, 0.15);
      margin-right: .75rem;
      flex: 0 0 auto;
    }

    /* Accordion styling */
    .accordion-button {
      background: var(--surface);
      color: var(--text);
      font-weight: 500;
    }

    .accordion-button:not(.collapsed) {
      background: var(--surface);
      color: var(--accent2);
    }

    .accordion-item {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .accordion-body {
      color: var(--text);
    }

    /* Testimonials */
    .testimonial {
      border-left: 4px solid rgba(207,162,74,.6);
      padding-left: 1rem;
      margin-bottom: 1rem;
      font-style: italic;
    }

    .review-stars {
      color: var(--accent);
    }

    /* CTA band */
    .cta-section{
      position: relative;
      padding: 3.75rem 0;
      overflow: hidden;
      background:
        radial-gradient(900px 380px at 10% 15%, rgba(207,162,74,0.18), transparent 60%),
        radial-gradient(900px 380px at 90% 85%, rgba(145,122,70,0.14), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.10));
      border-top: 1px solid rgba(0,0,0,0.04);
      border-bottom: 1px solid rgba(0,0,0,0.04);
    }

    .cta-section::before{
      content: "";
      position: absolute;
      inset: -40px;
      background-image: url('img/cta-section.jpg');
      background-repeat: repeat;
      opacity: 0.08;
      transform: rotate(-1.5deg);
      pointer-events: none;
    }

    .cta-card{
      position: relative;
      border-radius: calc(var(--radius) + 4px);
      border: 1px solid rgba(231,229,228,0.9);
      background: rgba(255,255,255,0.88);
      box-shadow: 0 18px 60px rgba(0,0,0,0.12);
      padding: 2.25rem;
      backdrop-filter: blur(8px);
    }

    .cta-kicker{
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .35rem .75rem;
      border-radius: 999px;
      background: rgba(207,162,74,0.14);
      border: 1px solid rgba(207,162,74,0.25);
      font-size: .85rem;
      color: #6b7280;
    }

    .section-divider{
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(145,122,70,0.30), transparent);
      margin: 1.25rem 0 1.5rem;
    }

    /* Footer */
    .endcap{
      border-top: 1px solid var(--line);
      background: transparent;
    }

    .endcap .logo-img{
      height: 40px;
      width: auto;
      display: block;
    }

    .credit-bar{
      background: #ffffff;
      border-top: 1px solid var(--line);
    }

    /* Scroll top button */
    #scrollTop {
      position: fixed;
      right: 1rem;
      bottom: 1rem;
      width: 48px;
      height: 48px;
      display: none;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      box-shadow: var(--shadow);
      cursor: pointer;
      z-index: 999;
    }

    #scrollTop:hover {
      background: var(--accent2);
    }

    /* Quick Actions */
    .quick-actions{
      padding: 1.75rem 0;
      border: 0;
    }

    .quick-actions .qa-card{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.92);
      box-shadow: 0 16px 44px rgba(0,0,0,0.10);
      padding: 1.25rem 1.25rem;
      backdrop-filter: blur(8px);
    }

    .quick-actions .qa-title{
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      margin: 0;
    }

    .quick-actions .qa-sub{
      margin: 0.25rem 0 0;
    }

    .quick-actions .qa-actions{
      display:flex;
      gap:.75rem;
      justify-content:flex-end;
      flex-wrap:wrap;
    }

    @media (max-width: 991.98px){
      .quick-actions .qa-actions{ justify-content:flex-start; }
    }

    @media (max-width: 575.98px){
      .quick-actions .qa-actions a{ width:100%; }
    }

    /* =========================================================
       CARET DEL YEET
       ========================================================= */
    body, body *{
      caret-color: transparent;
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    /* allow selection/caret in fields (if you ever add forms) */
    input, textarea, [contenteditable="true"]{
      caret-color: auto !important;
      -webkit-user-select: text !important;
      user-select: text !important;
    }

    /* reduce iOS long-press callout */
    img, a{
      -webkit-touch-callout: none;
    }