/* ===========================
   TaxPro – FULL CSS (final)
   =========================== */

:root{
  --bg:#0b0c10;
  --card:#111217;
  --accent:#2f6bff;
  --text:#eaeef7;
  --muted:#b8c0d3;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

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

.container{
  max-width:1100px;
  margin:0 auto;
  padding:36px 20px 20px;
  position:relative;
}

/* ===========================
   HERO
   =========================== */
.hero{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:48px;
  align-items:center;
  min-height: calc(100vh - 170px);
}

/* Cyan background arc (like the reference mock) */
.hero::before{
  content:"";
  position:absolute;
  left:-22vw;
  top:-18vw;
  width: clamp(560px, 58vw, 920px);
  height: clamp(560px, 58vw, 920px);
  background:#05cfe3;
  border-radius:50%;
  filter: drop-shadow(0 35px 120px rgba(5,207,227,.35));
  z-index:0;
}

/* ===========================
   PHONE MOCKUP
   =========================== */
.phone{
  position: relative;
  width:100%;
  max-width:300px;
  margin:auto;
  aspect-ratio: 9/19.5;
  border-radius:36px;

  /* Screen color (slightly brighter for readability) + top camera dots via layered backgrounds */
  background:
    radial-gradient(8px 8px at 22% 16px, #2b2b2b 98%, transparent 100%),
    radial-gradient(8px 8px at calc(22% + 18px) 16px, #242424 98%, transparent 100%),
    radial-gradient(8px 8px at calc(22% - 18px) 16px, #242424 98%, transparent 100%),
    #0b0e14;

  /* Drop shadow + brighter bezel + inner highlight */
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 0 0 14px #2f363f,
    inset 0 0 0 2px rgba(255,255,255,.07);

  /* Make logo and wordmark stack vertically */
  display:flex;
  flex-direction: column;        /* <<< keeps text under the logo */
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:1;
}

/* Speaker slot */
.phone::before{
  content:"";
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  width:38%;
  height:10px;
  border-radius:8px;
  background:#1b1b1b;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}

/* Outer hairline outline */
.phone::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:36px;
  pointer-events:none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}

/* Logo inside the phone */
.phone img{
  width:40%;                    /* logo width */
  max-width:300px;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 0 6px 0;             /* small gap before wordmark */
  border-radius:22px;
}

/* Wordmark exactly under the logo and same visual width */
.phone-wordmark{
  width:40%;                    /* matches the logo width above */
  max-width:200px;
  margin:0;
  line-height:1;
  font-weight:600;
  letter-spacing:.3px;
  color:#fff;
  text-align:center;            /* center under the logo */
  font-size: clamp(28px, 6.3vw, 34px);
}

/* ===========================
   Right content
   =========================== */
h1{
  margin:0 0 14px;
  font-size: clamp(42px, 5.4vw, 70px);
  line-height:1.05;
}
.lead{color:var(--muted); font-size:18px; margin:0 0 28px}

/* Button (no underline; dark rounded pill as in ref) */
.btn{
  display:inline-block;
  padding:16px 28px;
  background:#2b2b2b;
  color:#fff;
  border-radius:16px;
  font-weight:800;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  transition: transform .05s ease-in-out, box-shadow .2s, background .2s;
}
.btn:hover{background:#333}
.btn:active{ transform: translateY(1px); box-shadow: 0 8px 18px rgba(0,0,0,.32);}

/* ===========================
   Footer
   =========================== */
.site-footer{
  padding: 24px 20px 36px;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-wrap{
  max-width:1100px; margin:0 auto;
  display:flex; flex-direction:column; gap:6px; text-align:center;
  font-size:14px;
}
.footer-top{display:flex; flex-direction:column; gap:4px}
.footer-copy{opacity:.9; font-size:13px}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    gap:34px;
    min-height:auto;
    padding-top:10px;
  }
  .hero::before{ left:-35vw; top:-38vw; }
  .phone{ max-width:420px }
  h1{ text-align:left }
  .lead, .btn{ text-align:left }
}

@media (max-width: 520px){
    .phone img{
    width: 50%;   /* আগে ~40% ছিল, এখন একটু বড় */
  }
  .container{ padding:26px 16px 20px }
  .phone{ max-width:200px }
  /* Smaller wordmark on mobile while keeping 1:1 width with logo */
  .phone-wordmark{ font-size: clamp(20px, 8.0vw, 21px); }
  h1{ font-size: clamp(34px, 9vw, 50px) }
}