/*
  Sunbux styles
  - Responsive, accessible, minimal CSS approximating the provided layout
*/

:root {
    --bg: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --brand: #0ea5e9;
    --brand-600: #0284c7;
    --brand-700: #0369a1;
    --surface: #f1f5f9;
    --ring: rgba(14, 165, 233, 0.25);
  }
  
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
  }
  
  .skip-link{
    position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  }
  .skip-link:focus{ left: 1rem; top: 1rem; width: auto; height: auto; background:#fff; padding:.5rem .75rem; border-radius:.5rem; box-shadow:0 0 0 4px var(--ring); }
  
  .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
  
  .site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.8); backdrop-filter: blur(8px); border-bottom: 1px solid #e2e8f0; }
  .header-inner { display:flex; align-items:center; justify-content: space-between; min-height:64px; }
  .logo { font-weight: 800; letter-spacing: .2px; color: var(--text); text-decoration: none; }
  
  .nav-toggle { display:none; background: transparent; border:1px solid #e2e8f0; padding:.5rem .75rem; border-radius:.5rem; }
  .nav-list { display:flex; gap: 1rem; list-style:none; margin:0; padding:0; }
  .nav-list a { text-decoration:none; color: var(--muted); padding:.5rem .25rem; border-radius:.375rem; }
  .nav-list a:hover, .nav-list a:focus { color: var(--text); background: var(--surface); }
  
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:.6rem; text-decoration:none; font-weight:600; border:1px solid transparent; }
  .btn-primary { background: var(--brand); color: white; border-color: var(--brand-600); }
  .btn-primary:hover { background: var(--brand-600); }
  .btn-ghost { background: transparent; color: var(--text); border-color:#e2e8f0; }
  .btn-ghost:hover { background: var(--surface); }
  .btn-lg { padding: .9rem 1.25rem; font-size: 1.05rem; }
  
  .lead { font-size: 1.1rem; color: var(--muted); }
  .micro { font-size: .9rem; color: var(--muted); }
  
  .section { padding: 64px 0; }
  .section.alt { background: var(--surface); }
  
  .hero { background: linear-gradient(180deg, rgba(14,165,233,.12), rgba(14,165,233,0) 40%), radial-gradient(60% 80% at 10% -10%, rgba(99,102,241,.18), transparent 60%), radial-gradient(60% 80% at 100% 0%, rgba(14,165,233,.18), transparent 50%); }
  .grid-2 { display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
  
  .phone-mockup, .signup-card, .hero-card { height: 340px; border-radius: 24px; background: conic-gradient(from 180deg at 50% 50%, #0284c7, #38bdf8, #6366f1, #0284c7); mask: radial-gradient(white, transparent 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 20px 50px rgba(2,132,199,.25); }
  
  .card-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
  .card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.2rem; box-shadow: 0 6px 20px rgba(2, 132, 199, .06); }
  .card h3 { margin-top: 0; }
  .card .more { color: var(--brand-700); text-decoration:none; }
  .card .more:hover { text-decoration: underline; }
  
  .steps { counter-reset: step; list-style:none; padding-left:0; display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .steps li { background:white; border:1px solid #e2e8f0; border-radius: 12px; padding: .9rem 1rem; position:relative; }
  .steps li:before { counter-increment: step; content: counter(step); position:absolute; top:-10px; left:-10px; width: 34px; height:34px; display:grid; place-items:center; border-radius:50%; background: var(--brand); color:white; font-weight:700; box-shadow: 0 6px 18px rgba(14,165,233,.35); }
  
  .checklist, .bullets { padding-left: 1.2rem; }
  .checklist li { margin: .35rem 0; }
  
  .tip-card { background: #0ea5e914; border: 1px dashed var(--brand-600); padding: 1rem 1.2rem; border-radius: 16px; }
  
  .cta { background: linear-gradient(120deg, #0ea5e9 0%, #6366f1 100%); color: white; }
  .cta .btn-primary { background: #111827; border-color:#111827; }
  
  .faq-item { border:1px solid #e2e8f0; border-radius: 12px; padding: .75rem 1rem; margin:.75rem 0; background:white; }
  .faq-item summary { cursor:pointer; list-style: none; }
  .faq-item h3 { display:inline; font-size: 1rem; }
  
  .site-footer { background: #0b1220; color:#cbd5e1; padding: 40px 0; }
  .footer-grid { display:flex; align-items:flex-start; justify-content: space-between; gap: 2rem; }
  .footer-nav a { color:#cbd5e1; text-decoration:none; margin-right: 1rem; }
  .footer-nav a:hover { text-decoration: underline; }
  
  /* Responsive */
  @media (max-width: 960px){
    .grid-2 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: 1fr; }
  }
  
  @media (max-width: 720px){
    .nav-toggle { display:block; }
    .nav-list { display:none; position:absolute; right: 20px; top: 64px; background:white; border:1px solid #e2e8f0; border-radius: 12px; padding:.5rem; flex-direction:column; min-width: 220px; box-shadow: 0 12px 34px rgba(0,0,0,.08); }
    .nav-list.show { display:flex; }
  }
/* Button desing */

  .btncolor {
    padding: 0.6em 2em;
    text-decoration: none;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .linkbtn{
    margin-top: 70px;
    margin-bottom: 30px;
  }
  
  .btncolor:before {
    content: "";
    background: linear-gradient(
      45deg,
      #ff0000,
      #ff7300,
      #fffb00,
      #48ff00,
      #00ffd5,
      #002bff,
      #7a00ff,
      #ff00c8,
      #ff0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-85 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
  }
  
  @keyframes glowing-button-85 {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }
  
  .btncolor:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
  }