/* Guardium – Apple-like light minimal styles */
:root{
  /* refined palette for a more premium look */
  --bg:#f4f6fb;
  --surface:rgba(255,255,255,0.86);
  --text:#0f1720;
  --muted:#5f6b73;
  --border:rgba(20,24,30,0.06);
  --link:#0853d1;
  --accent-1:rgba(2,84,255,0.12);
  --shadow:0 12px 30px rgba(10,18,30,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  /* base color; visual ornaments are rendered in the fixed overlay so the gradient is continuous across scroll/zoom */
  background: var(--bg);
  line-height:1.6;
}

/* Single fixed gradient overlay: covers the viewport and stays fixed so it doesn't restart or tile when scrolling/zooming */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(60vw 48vh at 8% 12%, rgba(226,235,252,0.98) 0%, rgba(226,235,252,0.78) 22%, rgba(226,235,252,0.55) 44%, transparent 78%),
    radial-gradient(55vw 42vh at 92% 10%, rgba(235,242,255,0.98) 0%, rgba(235,242,255,0.78) 20%, rgba(235,242,255,0.54) 44%, transparent 76%),
    linear-gradient(180deg, #fbfcfe 0%, var(--bg) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 8% 12%, 92% 10%, center;
  background-size: 220% 160%, 200% 150%, cover;
}

/* Ornament layer: GPU-friendly transform animation instead of animating background-position */
body::before,
body::after{
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none; transform:translate3d(0,0,0); will-change:transform;
}

/* left ornament */
body::before{
  background: radial-gradient(70vw 60vh at -30% 10%, rgba(226,235,252,0.98) 0%, rgba(226,235,252,0.82) 22%, rgba(226,235,252,0.6) 40%, transparent 80%);
  background-repeat:no-repeat; background-size: 320% 220%; background-position: -30% 10%;
  animation:ornamentDriftLeft 48s linear infinite alternate;
}

/* right ornament */
body::after{
  background: radial-gradient(72vw 56vh at 130% 14%, rgba(235,242,255,0.98) 0%, rgba(235,242,255,0.8) 20%, rgba(235,242,255,0.56) 44%, transparent 82%);
  background-repeat:no-repeat; background-size: 300% 200%; background-position: 130% 14%;
  animation:ornamentDriftRight 52s linear infinite alternate-reverse;
}

@keyframes ornamentDriftLeft{0%{transform:translate3d(-2%, -1%,0)}100%{transform:translate3d(-6%,-3%,0)}}
@keyframes ornamentDriftRight{0%{transform:translate3d(2%, -1%,0)}100%{transform:translate3d(6%,-3%,0)}}

@keyframes ornamentDrift{
  0%{ transform: translate3d(-2%, -1%, 0) }
  100%{ transform: translate3d(-6%, -3%, 0) }
}
img{max-width:100%;display:block}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
a{transition:color 180ms ease, background 180ms ease}
.container{width:min(1100px, 92%); margin-inline:auto}
.section{padding:80px 0; background:transparent}
.section.alt{background:transparent}
.site-main{padding-top:72px}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:999;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4%;
  /* subtle divider; keep extremely light so background remains continuous */
  border-bottom:1px solid rgba(20,24,30,0.03);
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
  backdrop-filter:saturate(160%) blur(10px);
  box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:600}
.brand{ /* make the logo anchor a wider tappable/clickable target */
  padding:6px 8px; /* small hit area */
  border-radius:8px;
  min-width:48px; /* ensure it's not too narrow */
}
.brand img{filter:none; width:auto; height:32px; display:block; object-fit:contain}
/* Language switch */
.lang-switch{display:inline-flex; gap:6px; align-items:center; margin-left:8px}
.lang-btn{background:transparent; border:1px solid transparent; padding:6px 8px; border-radius:8px; font-weight:700; cursor:pointer}
.lang-btn[aria-pressed="true"]{background:rgba(0,0,0,0.08)}
.lang-btn:hover{background:rgba(0,0,0,0.04)}
.lang-btn:focus-visible{outline:3px solid rgba(0,113,227,0.18); outline-offset:3px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--text); opacity:.8; padding:8px 10px; border-radius:8px; transition:opacity 160ms ease, background 160ms ease}
.nav a:hover{opacity:1; background:rgba(0,0,0,0.04); text-decoration:none}
.nav a:focus-visible{outline:3px solid rgba(0,113,227,0.18); outline-offset:3px; opacity:1}
.nav .cta{color:#fff; background:#000; padding:10px 14px; border-radius:999px; font-weight:600; transition:background 160ms ease, transform 120ms ease}
.nav .cta:hover{background:#111}
.nav .cta:focus-visible{outline:3px solid rgba(0,113,227,0.18); outline-offset:3px}

/* Language dropdown in nav */
.lang-dropdown{position:relative}
.lang-toggle{background:transparent; border:1px solid transparent; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:inherit; font-weight:inherit; color:var(--text); opacity:.8; transition:opacity 160ms ease, background 160ms ease; transform: translateY(2px)}
.lang-toggle:hover{opacity:1; background:rgba(0,0,0,0.04)}
.lang-toggle:focus-visible{outline:3px solid rgba(0,113,227,0.18); outline-offset:3px}
/* Position the menu relative to the language container and animate appearance */
.lang{display:inline-flex; align-items:center; position:relative}
.lang .lang-toggle{padding:8px 10px; font-weight:600; border-radius:8px; margin:0 8px; background:transparent; border:1px solid var(--border); color:var(--text)}
.lang .lang-menu{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  /* Make menu fully opaque for better readability on varied backgrounds */
  background: #ffffff; /* solid white */
  border:1px solid rgba(20,24,30,0.06);
  padding:6px;
  border-radius:10px;
  min-width:160px;
  box-shadow:0 8px 30px rgba(10,18,30,0.08);
  z-index:1000;
  /* hidden by default but ready to animate */
  visibility:hidden;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity 180ms ease, transform 180ms ease, visibility 0ms linear 180ms;
}
.lang .lang-menu.show,
.lang .lang-menu.open{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  transition-delay:0ms;
}
.lang .lang-menu .button{width:100%; display:block; text-align:left; padding:8px 10px; border-radius:6px; background:transparent; border:none}
.lang .lang-menu .button:hover{background:rgba(10,80,200,0.06)}
.nav-toggle{display:none}

/* Hero */
.hero{ padding:120px 0 60px; background:transparent}
.hero-inner{width:min(1000px, 92%); margin:0 auto; text-align:center; position:relative; z-index:2}
/* glass-like hero card */
.hero-inner::before{content:''; position:absolute; inset:0; left:50%; transform:translateX(-50%); max-width:1100px; width:100%; height:100%; border-radius:20px; background:var(--surface); box-shadow:0 10px 26px rgba(10,18,30,0.06); backdrop-filter:blur(6px) saturate(120%); border:0; z-index:-1}
.hero-inner{padding:48px;}
.hero-inner{animation:fadeUp 0.7s ease forwards; will-change: opacity, transform}
.hero h1{font-size:clamp(30px, 5vw, 56px); line-height:1.1; font-weight:700; letter-spacing:-0.02em; margin:0 0 16px}
.hero p{color:var(--muted); font-size:clamp(16px, 2.4vw, 20px); margin:0 auto 24px; max-width:760px}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:16px 0 12px}
.badges{display:flex; gap:10px; list-style:none; padding:0; margin:18px 0 0; justify-content:center; flex-wrap:wrap}
.badges li{border:1px solid var(--border); background:rgba(255,255,255,0.7); padding:8px 12px; border-radius:999px; color:var(--muted); font-size:14px}

/* Packages */
.packages{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}

/* Enterprise size tier selector */
.tier-selector{display:flex; gap:10px; justify-content:flex-start; align-items:center; margin:18px 0}
.tier-option{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.96); border:1px solid var(--border); padding:8px 12px; border-radius:10px; cursor:pointer; transition:transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms ease, background 220ms ease, color 200ms ease}
.tier-option input{appearance:none; -webkit-appearance:none; width:0; height:0; margin:0; padding:0}
.tier-option span{font-weight:600; color:var(--muted); transition:color 180ms ease}
.tier-option:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(10,18,30,0.08)}
.tier-option:active{transform:translateY(-1px) scale(0.996); box-shadow:0 6px 18px rgba(10,18,30,0.06)}
.tier-option:focus-within{outline:3px solid rgba(8,83,209,0.12); outline-offset:4px}
.tier-option:has(input:checked):focus-within,
.tier-option.active:focus-within{
  /* Remove the light-blue halo when the option is selected, but keep focus visuals for non-selected items */
  outline: none;
  outline-offset: 0;
}
.tier-option:has(input:checked){background:linear-gradient(90deg,var(--link),#0a57d9); color:#fff}
.tier-option:has(input:checked) span{color:#fff}

/* Active class fallback for browsers that don't support :has() */
.tier-option.active{background:linear-gradient(90deg,var(--link),#0a57d9); color:#fff}
.tier-option.active span{color:#fff}

/* keyboard focus for inputs inside labels */
.tier-option input:focus-visible + span,
.tier-option:focus-visible span{outline:none}

@media (prefers-reduced-motion: reduce){
  .tier-option{transition:none}
  .tier-option:hover, .tier-option:active{transform:none; box-shadow:none}
}

@media (max-width:640px){
  .tier-selector{flex-direction:column; align-items:stretch}
  .tier-option{justify-content:center}
}
.package-card{background:rgba(255,255,255,0.96); border:1px solid var(--border); padding:22px 22px 26px; border-radius:14px; box-shadow:0 10px 30px rgba(10,18,30,0.06); position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:320px}
.package-card .pkg-header{display:flex; gap:16px; align-items:flex-start; margin-bottom:10px}
/* push the title down a little so the icon aligns with the first line of multi-line headings */
.package-card .pkg-header h3{margin-top:6px}
.pkg-icon{width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:rgba(15,23,32,0.75); flex:0 0 48px}
.pkg-icon svg{width:30px; height:30px; display:block}
/* Title area: stack title and small subtitle so each card lines up */
.package-card h3{margin:0; font-size:18px; line-height:1.18; display:flex; flex-direction:column}
.package-card h3 small{display:block; margin-top:8px; font-size:13px; color:var(--muted); font-weight:600}
.package-card ul{margin:14px 0 16px; padding-left:22px; color:var(--muted); flex:1; gap:8px}
.package-card ul li{margin-bottom:8px}
.package-card .price{font-weight:700; margin-top:16px}
.package-card .muted{font-weight:400; color:var(--muted); font-size:13px}
.package-card.popular{
  /* match regular package cards so it visually aligns with others */
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(10,18,30,0.06);
  transform:none;
}

/* Price change animation: small fade + slide for updated values */
.price-amount{display:inline-block; will-change:transform, opacity; transition:transform 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease}
.price-amount.out{opacity:0; transform:translateY(-6px) scale(0.99)}
.price-amount.in{opacity:1; transform:translateY(0) scale(1)}

@media (prefers-reduced-motion: reduce){
  .price-amount{transition:none}
}

@media (max-width:900px){
  .packages{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .packages{grid-template-columns:1fr}
}

/* Buttons */
.button{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--border); color:var(--text); background:rgba(255,255,255,0.95); text-decoration:none; box-shadow:var(--shadow); transition:transform 160ms ease, background 180ms ease, box-shadow 180ms ease}
.button.primary{background:linear-gradient(90deg,var(--link),#0a57d9); color:#fff; border-color:transparent; box-shadow:0 8px 30px rgba(10,80,200,0.12)}
.button.primary:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(10,80,200,0.16)}
.button:hover{transform:translateY(-1px)}
.button:focus-visible{outline:3px solid rgba(0,113,227,0.18); outline-offset:3px}

/* Cards & grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:rgba(255,255,255,0.92); border:1px solid var(--border); padding:22px; border-radius:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:space-between; min-height:260px}
.card{transition:transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease}
.card:hover{transform:translateY(-10px); box-shadow:0 20px 50px rgba(10,18,30,0.12); border-color:rgba(8,83,209,0.12)}

/* reveal animation for cards */
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.grid .card{opacity:0; transform:translateY(10px); animation:fadeUp 0.7s ease forwards; will-change: opacity, transform}
.grid .card:nth-child(1){animation-delay:0.05s}
.grid .card:nth-child(2){animation-delay:0.12s}
.grid .card:nth-child(3){animation-delay:0.18s}
.grid .card:nth-child(4){animation-delay:0.24s}
.grid .card:nth-child(5){animation-delay:0.30s}
.grid .card:nth-child(6){animation-delay:0.36s}
/* center the 7th card in the middle column for a symmetric layout on desktop */
.grid .card:nth-child(7){grid-column:2; animation-delay:0.42s}
.card h3{margin:0 0 8px; font-size:20px}
.card p{margin:0; color:var(--muted)}

/* Accordion (FAQ-style) for Services */
.accordion{display:block; margin-top:18px}
.accordion-item{border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.96); margin-bottom:12px; overflow:hidden}
.accordion-toggle{appearance:none; -webkit-appearance:none; width:100%; text-align:left; padding:16px 18px; font-size:16px; background:transparent; border:0; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer}
.accordion-toggle:focus-visible{outline:3px solid rgba(0,113,227,0.12); outline-offset:2px}
.accordion-toggle span{font-weight:700; color:var(--text)}
.accordion-toggle::after{content:'+'; font-weight:700; display:inline-block; width:28px; height:28px; border-radius:8px; background:rgba(0,0,0,0.04); color:var(--muted); display:grid; place-items:center}
.accordion-toggle[aria-expanded="true"]::after{
  content: '×';
  background: rgba(8,83,209,0.12);
  color: var(--link);
}
.accordion-panel{
  /* JS drives the height with inline styles; keep overflow hidden during animation */
  overflow: hidden; padding: 0 18px 18px 18px; color:var(--muted);
  /* animate height and bottom padding together for a natural collapse to header size */
  transition: height 360ms cubic-bezier(.2,.9,.2,1), padding-bottom 360ms cubic-bezier(.2,.9,.2,1);
}
/* remove CSS reliance on [hidden] display; JS will set/remove hidden attribute as needed */
/* Note: JS manages the hidden attribute; no CSS display:none here so transitions can run */


/* Lists, steps */
.list{margin:10px 0 0; padding-left:20px; color:var(--muted)}
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; counter-reset:step}
.steps li{list-style:none; background:var(--surface); border:1px solid var(--border); padding:16px; border-radius:14px; position:relative}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; top:-12px; left:-12px; width:28px; height:28px; border-radius:50%; background:#000; color:#fff; display:grid; place-items:center; font-weight:700}

/* Contact */
.contact-box{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:20px}
.small{color:var(--muted); font-size:14px}

/* Footer */
.site-footer{border-top:1px solid rgba(20,24,30,0.02); padding:36px 0; background:transparent}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted)}
.site-footer p{color:var(--muted); margin:0}
.site-footer a{color:var(--muted); text-decoration:none; margin-right:10px}
.site-footer a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 900px){
  .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr 1fr}
  /* on smaller viewports, let the 7th card flow naturally (don't force into column 2) */
  .grid .card:nth-child(7){grid-column:auto}
}
@media (max-width: 640px){
  .nav{display:none; position:absolute; top:58px; right:4%; background:#fff; border:1px solid var(--border); padding:8px; border-radius:12px; box-shadow:var(--shadow)}
  .nav.open{display:flex; flex-direction:column; align-items:stretch}
  .nav a{padding:10px 12px}
  .nav .cta{order:-1}
  .nav-toggle{display:inline-flex; background:#fff; color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:10px}
  .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}

/* Promo section for special offers (matches site visual language) */
.promo-offer{padding:56px 0;}
.promo-content{display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--surface); border:1px solid var(--border); padding:28px; border-radius:14px; box-shadow:0 10px 30px rgba(10,18,30,0.06)}
.promo-text{max-width:720px}
.promo-text h2{margin:0 0 8px; font-size:clamp(20px,3.2vw,28px); line-height:1.15}
.promo-text .lead{margin:0; color:var(--muted); font-size:16px}
.promo-cta{flex:0 0 auto}
.promo-offer .button.large{padding:14px 20px; font-size:16px}

@media (max-width:900px){
  .promo-content{flex-direction:column; align-items:flex-start}
  .promo-cta{width:100%}
  .promo-offer .button{width:100%; justify-content:center}
}

/* Prefer reduced motion — remove non-essential animations and transitions */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important}
  body::before{animation:none}
  .hero-inner::before{backdrop-filter:none}
}