/* =========================================================
   SG Apps Tech — Design System (Clean / Light / Minimal)
   ========================================================= */

@font-face{
  font-family:'Google Sans Flex';
  src:url('../fonts/GoogleSansFlex.ttf') format('truetype-variations'),
      url('../fonts/GoogleSansFlex.ttf') format('truetype');
  font-weight:100 1000;
  font-stretch:25% 151%;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:            #f6f7fb;
  --bg-soft:       #ffffff;
  --text:          #14161c;
  --text-muted:    #5b6472;
  --text-faint:    #8891a0;

  --primary:       #3b82f6;
  --primary-dark:  #2563eb;
  --secondary:     #8b5cf6;
  --teal:          #06b6d4;

  --border:        rgba(15,23,42,.08);
  --border-soft:   rgba(15,23,42,.06);
  --shadow-sm:      0 4px 16px rgba(15,23,42,.05);
  --shadow-md:      0 14px 34px rgba(15,23,42,.08);
  --shadow-lg:      0 24px 60px rgba(15,23,42,.12);

  --radius-sm:     14px;
  --radius-md:     20px;
  --radius-lg:     28px;

  --grad-primary:  linear-gradient(135deg,#3b82f6,#8b5cf6);
  --grad-soft:     linear-gradient(135deg,rgba(59,130,246,.08),rgba(139,92,246,.08));

  --ease: cubic-bezier(.22,1,.36,1);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Google Sans Flex','Roboto',Arial,sans-serif;
  font-variation-settings:'wght' 400,'opsz' 14,'wdth' 100,'GRAD' 0,'ROND' 0;
}

h1,h2,h3,h4,
.logo,
.section-title,
.hero h1{
  font-variation-settings:'wght' 700,'opsz' 32,'wdth' 100,'GRAD' 0,'ROND' 0;
}

body{
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

a{ color:inherit; }

p{
  text-align:justify;
  text-justify:inter-word;
}

.hero.center p,
.section-sub,
.rating,
.metric,
.blog-date,
.support-box p{
  text-align:center;
}

img{ max-width:100%; }

::selection{
  background:var(--primary);
  color:#fff;
}

/* ===================== BACKGROUND BLOBS ===================== */
.bg-blur{
  position:fixed;
  border-radius:50%;
  filter:blur(120px);
  z-index:-1;
  opacity:.35;
  animation:float 16s ease-in-out infinite;
}

.bg1{
  width:420px;
  height:420px;
  background:var(--primary);
  top:-120px;
  left:-120px;
}

.bg2{
  width:420px;
  height:420px;
  background:var(--secondary);
  bottom:-140px;
  right:-140px;
  animation-delay:-8s;
}

@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(40px,30px) scale(1.08); }
}

/* ===================== HEADER / NAV ===================== */
header{
  padding:18px 0;
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(246,247,251,.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

header.scrolled{
  background:rgba(255,255,255,.85);
  border-bottom-color:var(--border-soft);
  box-shadow:var(--shadow-sm);
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-size:1.35rem;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:-.02em;
}

.logo img{
  width:34px;
  height:34px;
  border-radius:9px;
  object-fit:cover;
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}

nav{
  display:flex;
  align-items:center;
}

nav a{
  color:var(--text-muted);
  text-decoration:none;
  margin-left:2px;
  padding:8px 12px;
  border-radius:50px;
  transition:.25s var(--ease);
  font-size:.86rem;
  font-weight:500;
  position:relative;
  white-space:nowrap;
}

nav a:hover{
  background:rgba(59,130,246,.08);
  color:var(--primary-dark);
}

nav a.active{
  background:var(--grad-primary);
  color:#fff;
  box-shadow:0 6px 18px rgba(59,130,246,.35);
}

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-soft);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:.3s var(--ease);
}

.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===================== HERO ===================== */
.hero{
  padding:70px 0 30px;
  position:relative;
  overflow:hidden;
}

.hero > .container{
  position:relative;
  z-index:1;
}

.particles-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
}

.hero-content{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

.hero h1{
  font-size:3.6rem;
  line-height:1.12;
  margin:22px 0;
  letter-spacing:-.03em;
  font-weight:800;
}

.hero .gradient-text{
  background:var(--grad-primary);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% auto;
  animation:shimmer 6s linear infinite;
}

@keyframes shimmer{
  to{ background-position:200% center; }
}

.hero p{
  color:var(--text-muted);
  line-height:1.85;
  max-width:540px;
  font-size:1.02rem;
  text-align:left;
}

.hero.center{
  text-align:center;
  padding:70px 0 30px;
}

.hero.center p{
  max-width:700px;
  margin:0 auto;
}

.badge{
  background:var(--grad-soft);
  border:1px solid rgba(59,130,246,.18);
  color:var(--primary-dark);
  padding:9px 18px;
  border-radius:50px;
  font-size:.85rem;
  font-weight:600;
  display:inline-block;
}

.hero-buttons{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.btn-primary,
.btn-secondary{
  padding:15px 30px;
  border-radius:50px;
  text-decoration:none;
  display:inline-block;
  font-weight:600;
  font-size:.95rem;
  transition:.3s var(--ease);
  border:none;
  cursor:pointer;
}

.btn-primary{
  background:var(--grad-primary);
  color:#fff;
  box-shadow:0 10px 26px rgba(59,130,246,.32);
}

.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(59,130,246,.42);
}

.btn-secondary{
  background:#1f2937;
  color:#fff;
  border:1px solid #1f2937;
}

.btn-secondary:hover{
  transform:translateY(-3px);
  background:#111827;
  border-color:#111827;
  color:#fff;
  box-shadow:var(--shadow-md);
}

.hero-image{
  padding:16px;
}

.hero-image img{
  width:100%;
  display:block;
  border-radius:20px;
  animation:floatSlow 5s ease-in-out infinite;
}

@keyframes floatSlow{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* ===================== GLASS CARD ===================== */
.glass{
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

/* ===================== SECTIONS ===================== */
section{
  padding:28px 0;
}

.section-alt{
  background:var(--bg-soft);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}

.home-copy{
  max-width:780px;
  margin:0 auto 8px;
  color:var(--text-muted);
}

.home-copy p{
  margin-bottom:14px;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;
  margin-top:8px;
}

.why-box{
  padding:28px;
  text-align:center;
}

.why-box .icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--grad-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  margin:0 auto 14px;
}

.why-box h3{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:8px;
}

.why-box p{
  color:var(--text-muted);
  font-size:.92rem;
  text-align:center;
}

.ad-slot{
  margin:0 auto;
  text-align:center;
  max-width:100%;
  overflow:hidden;
}

.section-title{
  font-size:2.1rem;
  font-weight:800;
  margin-top:0;
  margin-bottom:10px;
  text-align:center;
  letter-spacing:-.02em;
}

.section-sub{
  text-align:center;
  color:var(--text-muted);
  max-width:620px;
  margin:0 auto 26px;
}

/* ===================== STATS / APPS GRID ===================== */
.stats-grid,
.apps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

.stat-card,
.app-card{
  padding:32px;
  text-align:center;
}

.stat-card p,
.app-card p{
  text-align:center;
}

.app-card-left,
.app-card-left h3,
.app-card-left p{
  text-align:left;
}

.stat-card h2{
  font-size:2.4rem;
  font-weight:800;
  background:var(--grad-primary);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.stat-card p{
  color:var(--text-muted);
  margin-top:6px;
}

.app-card img{
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:24px;
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
}

.app-card h3{
  font-size:1.15rem;
  font-weight:700;
}

.app-card p{
  margin:14px 0;
  color:var(--text-muted);
  font-size:.94rem;
}

.app-card button{
  background:var(--grad-primary);
  color:white;
  border:none;
  padding:12px 24px;
  border-radius:50px;
  cursor:pointer;
}

.app-card{
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}

.app-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(59,130,246,.25);
}

/* featured / rank */
.featured{
  position:relative;
  border:1px solid rgba(59,130,246,.25);
  background:var(--grad-soft);
}

.rank{
  position:absolute;
  top:15px;
  right:15px;
  background:var(--grad-primary);
  color:#fff;
  padding:5px 13px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
}

.metric{
  margin-top:10px;
  color:var(--primary-dark);
  font-weight:700;
}

.rating{
  margin-top:10px;
  font-size:18px;
}

/* ===================== ABOUT / CONTACT CARDS ===================== */
.about-card,
.contact-card{
  padding:44px;
  margin:16px 0 0;
  line-height:1.9;
}

.about-card h2,
.contact-card h2{
  font-size:1.8rem;
  margin-bottom:18px;
  font-weight:800;
}

.about-card h3{
  margin-top:30px;
  margin-bottom:12px;
  font-size:1.2rem;
  font-weight:700;
}

.about-card p,
.contact-card p{
  color:var(--text-muted);
  margin-bottom:14px;
}

.about-card a:not(.btn-primary):not(.btn-secondary),
.contact-card a:not(.btn-primary):not(.btn-secondary){
  color:var(--primary-dark);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(59,130,246,.3);
}

.about-card a.btn-primary,
.about-card a.btn-secondary,
.contact-card a.btn-primary,
.contact-card a.btn-secondary{
  color:#fff;
}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:20px;
}

.stat-box{
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:24px;
  text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}

.stat-box:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

.stat-box h4{
  font-size:1.7rem;
  margin-bottom:8px;
  color:var(--primary-dark);
  font-weight:800;
}

.stat-box p{
  margin:0;
  color:var(--text-muted);
}

/* ===================== CONTACT ITEMS / FORM ===================== */
.contact-card{
  text-align:center;
}

.contact-card p{
  text-align:center;
}

.contact-info{
  margin-top:26px;
  text-align:left;
}

.contact-item{
  background:var(--bg);
  border:1px solid var(--border-soft);
  padding:20px;
  border-radius:var(--radius-sm);
  margin:14px 0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}

.contact-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-sm);
}

.contact-item h3{
  margin-bottom:8px;
  color:var(--text);
}

.contact-item a{
  color:var(--primary-dark);
  text-decoration:none;
  border-bottom:none !important;
}

.contact-form,
form{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:15px;
  text-align:left;
}

input,textarea,select{
  padding:15px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg);
  color:var(--text);
  font-family:'Google Sans Flex','Roboto',Arial,sans-serif;
  font-variation-settings:'wght' 400,'opsz' 14,'wdth' 100,'GRAD' 0,'ROND' 0;
  outline:none;
  transition:.25s var(--ease);
}

input:focus,textarea:focus,select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

form button,
.contact-form button{
  padding:15px;
  border:none;
  background:var(--grad-primary);
  color:white;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-family:'Google Sans Flex','Roboto',Arial,sans-serif;
  font-variation-settings:'wght' 400,'opsz' 14,'wdth' 100,'GRAD' 0,'ROND' 0;
  font-weight:700;
  transition:.3s var(--ease);
}

form button:hover,
.contact-form button:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 12px 26px rgba(59,130,246,.32);
}

.form-note{
  font-size:.85rem;
  color:var(--text-faint);
  margin-top:6px;
  text-align:left;
}

.form-note.form-error{
  color:#dc2626;
}

/* ===================== FOOTER ===================== */
footer{
  padding:50px 0 30px;
  text-align:center;
  color:var(--text-faint);
  border-top:1px solid var(--border-soft);
  margin-top:40px;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 22px;
  margin-bottom:20px;
}

.footer-links a{
  color:var(--text-muted);
  text-decoration:none;
  font-size:.92rem;
  transition:.25s var(--ease);
}

.footer-links a:hover{
  color:var(--primary-dark);
}

footer p{
  text-align:center;
}

/* ===================== REVEAL ON SCROLL ===================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

.stagger .reveal:nth-child(1){ transition-delay:.05s; }
.stagger .reveal:nth-child(2){ transition-delay:.15s; }
.stagger .reveal:nth-child(3){ transition-delay:.25s; }
.stagger .reveal:nth-child(4){ transition-delay:.35s; }
.stagger .reveal:nth-child(5){ transition-delay:.45s; }
.stagger .reveal:nth-child(6){ transition-delay:.55s; }

/* ===================== MARQUEE ===================== */
.marquee{
  display:flex;
  gap:50px;
  white-space:nowrap;
  overflow:hidden;
  padding:16px;
  background:var(--bg-soft);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}

.marquee span{
  animation:scroll 18s linear infinite;
  font-weight:600;
  color:var(--text-muted);
}

@keyframes scroll{
  from{transform:translateX(100%);}
  to{transform:translateX(-100%);}
}

/* ===================== PLAY BUTTON ===================== */
.play-btn{
  display:inline-block;
  margin-top:15px;
  padding:12px 18px;
  border-radius:50px;
  background:var(--grad-primary);
  color:white;
  text-decoration:none;
  font-weight:600;
  transition:.3s var(--ease);
}

.play-btn:hover{
  transform:scale(1.05);
  box-shadow:0 10px 25px rgba(59,130,246,.32);
}

/* ===================== GENERIC CARD GRIDS (blog/faq/support) ===================== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
}

.blog-card{
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.blog-date{
  color:var(--primary-dark);
  font-weight:700;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.blog-card h3{
  font-size:1.2rem;
  font-weight:700;
}

.blog-card p{
  color:var(--text-muted);
  font-size:.94rem;
  text-align:left;
}

.blog-tag{
  display:inline-block;
  background:var(--grad-soft);
  color:var(--primary-dark);
  font-size:.75rem;
  font-weight:700;
  padding:4px 12px;
  border-radius:50px;
  width:fit-content;
}

.faq-item{
  padding:26px 30px;
  margin-bottom:16px;
  cursor:pointer;
}

.faq-item h3{
  font-size:1.03rem;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.faq-item h3::after{
  content:"+";
  color:var(--primary);
  font-size:1.4rem;
  font-weight:400;
  transition:transform .3s var(--ease);
  flex-shrink:0;
}

.faq-item.open h3::after{
  transform:rotate(45deg);
}

.faq-item p{
  color:var(--text-muted);
  margin-top:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .35s var(--ease), opacity .35s var(--ease), margin-top .35s var(--ease);
}

.faq-item.open p{
  max-height:400px;
  opacity:1;
  margin-top:12px;
}

.faq-item a{
  color:var(--primary-dark);
  text-decoration:none;
  border-bottom:1px solid rgba(59,130,246,.3);
}

.support-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
  margin:30px 0;
}

.support-box{
  padding:28px;
  text-align:center;
}

.support-box .icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--grad-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  margin:0 auto 16px;
}

.support-box h3{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:8px;
}

.support-box p{
  color:var(--text-muted);
  font-size:.92rem;
}

/* ===================== APP DETAILS PAGE ===================== */
.app-page{
  padding:50px 0;
}

.app-header{
  display:flex;
  gap:30px;
  align-items:center;
  padding:34px;
  margin-bottom:25px;
  position:relative;
  overflow:hidden;
}

.app-header > *{
  position:relative;
  z-index:1;
}

.app-header > .particles-canvas{
  position:absolute;
  z-index:0;
}

.app-icon{
  width:130px;
  height:130px;
  border-radius:28px;
  object-fit:cover;
  box-shadow:var(--shadow-md);
}

.app-meta{ flex:1; }

.app-meta h1{
  font-size:2.2rem;
  margin-bottom:10px;
  font-weight:800;
  letter-spacing:-.02em;
}

.app-meta p{ color:var(--text-muted); }

.app-stats{
  display:flex;
  gap:25px;
  margin-top:22px;
  flex-wrap:wrap;
}

.app-stat{ text-align:center; }

.app-stat h3{
  font-size:1.2rem;
  margin-bottom:4px;
  font-weight:700;
}

.app-stat span{
  color:var(--text-faint);
  font-size:.85rem;
}

.section-box{
  padding:32px;
  margin-bottom:25px;
}

.section-box h2{
  margin-bottom:15px;
  font-size:1.4rem;
  font-weight:800;
}

.section-box p{
  color:var(--text-muted);
  line-height:1.85;
}

.features{ padding-left:20px; }

.features li{
  margin-bottom:10px;
  color:var(--text-muted);
}

.screenshot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}

.screenshot-grid img{
  width:100%;
  border-radius:20px;
  display:block;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease);
}

.screenshot-grid img:hover{
  transform:translateY(-6px) scale(1.02);
}

.info-table{
  width:100%;
  border-collapse:collapse;
}

.info-table td{
  padding:15px 5px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text);
}

.info-table td:first-child{
  width:180px;
  color:var(--text-faint);
}

.download-btn{ margin-top:25px; }

.back-link{
  display:inline-block;
  margin-bottom:25px;
  color:var(--text-muted);
  text-decoration:none;
  font-weight:600;
  transition:.25s var(--ease);
}

.back-link:hover{ color:var(--primary-dark); }

.not-found{
  padding:120px 20px;
  text-align:center;
}

.how-to-list{
  padding-left:22px;
  color:var(--text-muted);
  line-height:1.9;
}

.how-to-list li{ margin-bottom:12px; }

.coming-soon{
  opacity:.6;
  pointer-events:none;
  cursor:default;
}

.shorts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:25px;
  margin-top:30px;
}

.short-card{
  padding:15px;
  overflow:hidden;
}

.short-card iframe{
  width:100%;
  height:560px;
  border:none;
  border-radius:15px;
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1180px){

  nav{
    position:fixed;
    top:76px;
    left:0;
    right:0;
    background:var(--bg-soft);
    flex-direction:column;
    align-items:stretch;
    padding:14px;
    gap:6px;
    border-bottom:1px solid var(--border-soft);
    box-shadow:var(--shadow-md);
    transform:translateY(-130%);
    opacity:0;
    transition:transform .35s var(--ease), opacity .35s var(--ease);
    z-index:998;
  }

  nav.open{
    transform:translateY(0);
    opacity:1;
  }

  nav a{
    margin-left:0;
    text-align:center;
    font-size:.95rem;
    padding:11px 16px;
  }

  .nav-toggle{ display:flex; }
}

@media(max-width:900px){

  .hero-content{
    grid-template-columns:1fr;
  }

  .hero h1{ font-size:2.6rem; }

  .app-header{
    flex-direction:column;
    text-align:center;
  }

  .app-meta h1{ font-size:1.8rem; }

  .app-stats{ justify-content:center; }
}

@media(max-width:600px){
  .hero h1{ font-size:2.1rem; }
  .about-card,.contact-card{ padding:26px; }
}