:root { --vh: 1vh; --safe-top: env(safe-area-inset-top, 0px); }
html { scroll-behavior: smooth; }
body { font-family: Poppins, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif; background:#fff; color:#1f2937; }
a:focus-visible, button:focus-visible { outline: 2px solid #1fa766; outline-offset: 2px; border-radius: .5rem; }

/* Section sizing + centering */
.section {
  min-height: calc(var(--vh) * 100 - 4rem);
  display: grid; place-items: center;
  padding-block: 2.5rem; scroll-margin-top: 5rem;
  position: relative; overflow: hidden;
}
.bg-app {
  background:
    radial-gradient(1000px 360px at 110% -10%, rgba(211,47,47,.05), transparent 60%),
    radial-gradient(900px 360px at -10% 110%, rgba(31,167,102,.06), transparent 60%),
    #fff;
}
.divider { height: 1px; background: rgba(0,0,0,.06); }

/* HERO background */
#hero {
  background-image: url('https://iscunito.com/bg.jpg');
  background-repeat: repeat;
  background-position: top left;
  background-size: calc(100% / 10) auto;
  position: relative;
}
#hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.88));
  pointer-events: none;
}

/* Reveal + stagger animations (pure CSS keyframes) */
@keyframes fade-up { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } }
@keyframes fade-right { from { opacity:0; transform:translateX(-22px) } to { opacity:1; transform:none } }
@keyframes fade-left { from { opacity:0; transform:translateX(22px) } to { opacity:1; transform:none } }
@keyframes pop { from { transform:scale(.98) } to { transform:scale(1) } }

.reveal { opacity:0; transform:translateY(22px) }
.reveal.in { animation: fade-up .7s ease-out both }
.reveal-left { opacity:0; transform:translateX(22px) }
.reveal-left.in { animation: fade-left .7s ease-out both }
.reveal-right { opacity:0; transform:translateX(-22px) }
.reveal-right.in { animation: fade-right .7s ease-out both }

.stagger > * { opacity:0; transform:translateY(22px) }
.stagger.in > * { animation: fade-up .7s ease-out both }
.stagger.in > *:nth-child(1){ animation-delay:.00s }
.stagger.in > *:nth-child(2){ animation-delay:.08s }
.stagger.in > *:nth-child(3){ animation-delay:.16s }
.stagger.in > *:nth-child(4){ animation-delay:.24s }
.stagger.in > *:nth-child(5){ animation-delay:.32s }
.stagger.in > *:nth-child(6){ animation-delay:.40s }
.stagger.in > *:nth-child(7){ animation-delay:.48s }
.stagger.in > *:nth-child(8){ animation-delay:.56s }
.stagger.in > *:nth-child(9){ animation-delay:.64s }
.stagger.in > *:nth-child(10){ animation-delay:.72s }

/* Hover micro-interactions */
.hover-card {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), border-color .25s cubic-bezier(.2,.8,.2,1)
}
.hover-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.12); border-color: rgba(0,0,0,.08) }

/* Header scoped */
@keyframes hdr-ribbon-move { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hdr-ribbon{
  position:absolute; inset:auto 0 0 0; height:3px; overflow:hidden;
  background: linear-gradient(90deg,#1fa766,#ffffff,#d32f2f,#ffffff,#1fa766);
  background-size: 300% 100%; animation: hdr-ribbon-move 12s linear infinite;
}
@keyframes hdr-underline { 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }
.hdr-link{ position:relative; display:inline-block; padding:.25rem .1rem; transition: color .2s ease; }
.hdr-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:999px; overflow:hidden;
  background: rgba(0,0,0,.08);
}
.hdr-link::before{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:999px;
  background: linear-gradient(90deg,transparent, rgba(31,167,102,.8), rgba(211,47,47,.8), transparent);
  transform: translateX(-120%); opacity:0;
}
.hdr-link:hover{ color:#111827 }
.hdr-link:hover::before{ animation: hdr-underline 1.6s ease-in-out infinite; opacity:1 }
@keyframes hdr-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(31,167,102,.0)} 50%{box-shadow:0 0 0 10px rgba(31,167,102,.08)} }
.brand-img{ border-radius:.75rem; background:#fff; border:1px solid #e5e7eb }
.brand-wrap:hover .brand-img{ animation: hdr-pulse 2.8s ease-in-out infinite }

/* Hero scoped */
@keyframes hero-underline {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
.hero-accent{
  position:relative; height:4px; width:min(240px,50%);
  border-radius:999px; overflow:hidden; background:rgba(0,0,0,.08); margin-top:.75rem;
}
.hero-accent::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(31,167,102,.55), rgba(211,47,47,.55), transparent);
  background-size:200% 100%; animation:hero-underline 3s ease-in-out infinite; transform:translateX(-30%);
}
@keyframes hero-shine { 0% { transform: translateX(-120%) } 100% { transform: translateX(120%) } }
.shine-wrap{ position:relative; display:inline-block }
.shine-wrap::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.65) 45%, transparent 60%);
  mix-blend-mode: overlay; transform: translateX(-120%);
  animation: hero-shine 3.2s ease-in-out infinite .6s;
}
@keyframes hero-title { from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
.hero-title{ opacity:0; transform:translateY(20px) }
.hero-title.in{ animation: hero-title .8s ease-out both }
.hero-stagger > * { opacity:0; transform:translateY(18px) }
.hero-stagger.in > * { animation: fade-up .7s ease-out both }
.hero-stagger.in > *:nth-child(1){ animation-delay:.0s }
.hero-stagger.in > *:nth-child(2){ animation-delay:.08s }
.hero-stagger.in > *:nth-child(3){ animation-delay:.16s }
.cta-primary{
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 8px 20px rgba(211,47,47,.18);
}
.cta-primary:hover{ transform: translateY(-2px) scale(1.02) }
.cta-secondary{ transition: border-color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1) }
.cta-secondary:hover{ border-color:#9ca3af; transform: translateY(-2px) }

/* Who section scoped */
@keyframes who-gradient-move { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes who-shimmer { 0%{ transform:translateX(-120%) } 100%{ transform:translateX(120%) } }
@keyframes who-rise { 0%{ transform:translateY(10px); opacity:0 } 100%{ transform:translateY(0); opacity:.16 } }
.who-wrap { position:relative; }
.who-deco { position:absolute; inset:0; pointer-events:none; }
.who-deco span { position:absolute; width:12px; height:12px; border-radius:9999px; opacity:.16; animation: who-rise 7s ease-in-out infinite; }
.w1{ left:6%; bottom:8%; background:#1fa766; animation-delay:.2s }
.w2{ left:20%; bottom:12%; background:#d32f2f; animation-delay:.6s }
.w3{ right:10%; bottom:10%; background:#1fa766; animation-delay:1s }
.w4{ right:22%; bottom:14%; background:#d32f2f; animation-delay:.4s }
.who-card { position:relative; border-radius:1.25rem; isolation:isolate; }
.who-card::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:0;
  background: linear-gradient(120deg,#1fa766,#d32f2f,#1fa766);
  background-size:240% 240%; animation: who-gradient-move 7s ease-in-out infinite; filter:saturate(1.1);
}
.who-card > .inner{
  position:relative; z-index:1; background:#fff; border-radius:calc(1.25rem - 1px);
  padding:1.25rem; box-shadow:0 12px 28px rgba(0,0,0,.08);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.who-card:hover > .inner{ transform: translateY(-4px) scale(1.01); }
.who-accent{ position:relative; height:3px; background:rgba(0,0,0,.06); border-radius:999px; overflow:hidden; }
.who-accent::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(31,167,102,.35), rgba(211,47,47,.35), transparent);
  animation: who-shimmer 2.4s ease-in-out infinite; transform:translateX(-120%);
}
.who-logo{
  background: linear-gradient(135deg, rgba(31,167,102,.07), rgba(211,47,47,.07));
  border: 1px solid rgba(0,0,0,.06);
  border-radius:1rem; padding:1rem;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
.who-logo:hover{ transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 16px 28px rgba(0,0,0,.12); }

/* What section scoped */
@keyframes what-gradient-move { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes what-rise { 0%{ transform:translateY(12px); opacity:0 } 100%{ transform:translateY(0); opacity:.16 } }
@keyframes what-shimmer { 0%{ transform:translateX(-120%) } 100%{ transform:translateX(120%) } }
.wow-card { position: relative; border-radius: 1.25rem; isolation: isolate; }
.wow-card::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:0;
  background: linear-gradient(120deg,#1fa766, #d32f2f, #1fa766);
  background-size: 240% 240%; animation: what-gradient-move 7s ease-in-out infinite; filter: saturate(1.1);
}
.wow-card > .inner {
  position: relative; z-index: 1; background: #fff; border-radius: calc(1.25rem - 1px);
  padding: 1.25rem; box-shadow: 0 12px 28px rgba(0,0,0,.08);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.wow-card:hover > .inner { transform: translateY(-4px) scale(1.01); }
.wow-card .glow {
  position:absolute; inset:-6px; border-radius:inherit; z-index:0; opacity:0;
  background: radial-gradient(60% 60% at 30% 30%, rgba(31,167,102,.25), transparent 60%),
              radial-gradient(60% 60% at 70% 70%, rgba(211,47,47,.22), transparent 60%);
  transition: opacity .25s ease;
}
.wow-card:hover .glow { opacity: 1; }
.wow-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.25rem .6rem; border-radius:999px;
  background: linear-gradient(90deg, rgba(31,167,102,.12), rgba(211,47,47,.12));
  border: 1px solid rgba(0,0,0,.06); font-size:.75rem; color:#1f2937;
}
.icon-wrap {
  display:inline-flex; width:2.5rem; height:2.5rem; border-radius:1rem;
  align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(31,167,102,.12), rgba(211,47,47,.12));
}
.accent { position: relative; height: 3px; overflow:hidden; background: rgba(0,0,0,.06); border-radius:999px; }
.accent::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(31,167,102,.35), rgba(211,47,47,.35), transparent);
  transform: translateX(-120%); animation: what-shimmer 2.4s ease-in-out infinite;
}
.what-confetti { position:absolute; inset:0; pointer-events:none; }
.what-confetti span { position:absolute; width:12px; height:12px; border-radius:9999px; opacity:.16; animation: what-rise 7s ease-in-out infinite; }
.c1{ left:8%;  bottom:8%;  background:#1fa766; animation-delay:.2s }
.c2{ left:18%; bottom:12%; background:#d32f2f; animation-delay:.6s }
.c3{ left:28%; bottom:6%;  background:#1fa766; animation-delay:1s }
.c4{ right:12%; bottom:10%; background:#d32f2f; animation-delay:.4s }
.c5{ right:22%; bottom:14%; background:#1fa766; animation-delay:1.2s }

/* Contact section scoped */
@keyframes contact-gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes contact-shimmer { 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }
@keyframes contact-pop { 0%{ transform:translateY(8px); opacity:0 } 100%{ transform:none; opacity:1 } }
.csec-wrap{ position:relative }
.csec-deco{ position:absolute; inset:0; pointer-events:none }
.csec-deco span{ position:absolute; width:12px; height:12px; border-radius:9999px; opacity:.16; animation: contact-pop 6.5s ease-in-out infinite }
.cd1{ left:8%;  bottom:10%; background:#1fa766; animation-delay:.2s }
.cd2{ left:18%; bottom:14%; background:#d32f2f; animation-delay:.6s }
.cd3{ right:14%; bottom:12%; background:#1fa766; animation-delay:.4s }
.cd4{ right:22%; bottom:18%; background:#d32f2f; animation-delay:1s }
.c-card{ position:relative; border-radius:1.25rem; isolation:isolate }
.c-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:0;
  background: linear-gradient(120deg,#1fa766,#d32f2f,#1fa766);
  background-size:240% 240%; animation: contact-gradient 8s ease-in-out infinite; filter:saturate(1.05)
}
.c-inner{
  position:relative; z-index:1; background:#fff; border-radius:calc(1.25rem - 1px);
  padding:1.25rem; box-shadow:0 12px 28px rgba(0,0,0,.08);
  transition: transform .25s cubic-bezier(.2,.8,.2,1)
}
.c-card:hover .c-inner{ transform: translateY(-4px) scale(1.01) }
.c-acc{ position:relative; height:3px; background:rgba(0,0,0,.06); border-radius:999px; overflow:hidden }
.c-acc::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(31,167,102,.45), rgba(211,47,47,.45), transparent);
  transform:translateX(-120%); animation: contact-shimmer 2.4s ease-in-out infinite
}
.c-icon{
  display:inline-flex; width:2.75rem; height:2.75rem; border-radius:1rem;
  align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(31,167,102,.12), rgba(211,47,47,.12))
}

/* Footer scoped */
@keyframes ftr-ribbon { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.ftr-ribbon{
  position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg,#1fa766,#ffffff,#d32f2f,#ffffff,#1fa766);
  background-size: 320% 100%; animation: ftr-ribbon 14s linear infinite; opacity:.9;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in, .reveal-left, .reveal-left.in, .reveal-right, .reveal-right.in, .stagger > *, .stagger.in > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hdr-ribbon, .hdr-link::before, .brand-wrap:hover .brand-img,
  .hero-accent::after, .shine-wrap::after,
  .who-card::before, .who-accent::after, .who-deco span,
  .wow-card::before, .accent::after, .what-confetti span,
  .c-card::before, .c-acc::after, .csec-deco span,
  .ftr-ribbon { animation: none !important; }
  .cta-primary, .cta-secondary { transition: none !important; }
}
/* ===== One-time notice (creative, lightweight) ===== */
@keyframes n-border { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes n-pop { from{ transform: translateY(10px); opacity:0 } to{ transform:none; opacity:1 } }

.notice.hidden { display: none; }
.notice {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 60;
  display: grid; place-items: end; pointer-events: none;
}
@media (min-width: 640px){
  .notice { inset: auto 1.25rem 1.25rem auto; }
}
.notice-card {
  position: relative; width: min(36rem, 92vw);
  pointer-events: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.16));
  animation: n-pop .36s ease-out both;
}
.notice-border {
  position: absolute; inset: -1px; border-radius: 1rem;
  background: linear-gradient(120deg,#1fa766,#d32f2f,#1fa766);
  background-size: 240% 240%; animation: n-border 9s ease-in-out infinite;
  z-index: 0;
}
.notice-inner {
  position: relative; z-index: 1; border-radius: calc(1rem - 1px);
  background: #fff; padding: .95rem 1rem;
  border: 1px solid rgba(0,0,0,.05);
}
.notice-icon {
  display: inline-flex; align-items:center; justify-content:center;
  width: 2rem; height: 2rem; border-radius: .75rem;
  background: linear-gradient(135deg, rgba(31,167,102,.12), rgba(211,47,47,.12));
  color: #374151;
}

/* Buttons */
.notice-btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .9rem; border-radius: 999px;
  color:#fff; font-weight:600;
  background: linear-gradient(90deg, #1fa766, #d32f2f);
  box-shadow: 0 8px 20px rgba(211,47,47,.18);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.notice-btn-primary:hover { transform: translateY(-1px) scale(1.02); }
.notice-btn-secondary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .9rem; border-radius: 999px;
  background:#fff; border:1px solid #d1d5db; color:#374151;
  transition: border-color .2s, transform .2s cubic-bezier(.2,.8,.2,1);
}
.notice-btn-secondary:hover { border-color:#9ca3af; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce){
  .notice-card { animation: none !important; }
  .notice-border { animation: none !important; }
}