/* English site (US): only what styles.css does not already cover */

/* Hero: browser mockup */
.reel.mock{display:flex;align-items:center;justify-content:center;padding:28px;aspect-ratio:auto}
.browser{position:relative;width:100%;max-width:470px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.browser .bar{display:flex;align-items:center;gap:6px;background:#eef0f6;padding:10px 12px}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#c9cedd}
.browser .bar span{margin-left:10px;flex:1;background:#fff;border-radius:999px;padding:3px 12px;font-size:.72rem;color:#7a8196}
.browser .page{padding:16px 18px 20px;color:var(--ink)}
.browser .pn{display:flex;align-items:center;justify-content:space-between;font-family:Sora,sans-serif;font-size:.85rem}
.browser .langs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.68rem;font-weight:700}
.browser .langs u{text-decoration:none;padding:3px 9px;color:var(--muted)}
.browser .langs u:not(.off){background:var(--grad);color:#fff}
.browser .hl{height:92px;border-radius:10px;margin-top:14px;background:linear-gradient(135deg,#1e2a5c,#f0469b 70%,#f7931e)}
.browser .h1{font-family:Sora,sans-serif;font-weight:800;font-size:1.15rem;margin-top:14px;letter-spacing:-.02em}
.browser .sub{height:7px;border-radius:4px;background:#e4e7ef;margin-top:9px;width:92%}
.browser .sub.s2{width:68%}
.browser .btnm{display:inline-block;margin-top:14px;background:var(--grad);color:#fff;font-weight:700;font-size:.74rem;padding:7px 14px;border-radius:999px}
.browser .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.browser .tiles span{height:46px;border-radius:8px;background:var(--soft);border:1px solid var(--line)}

/* Notice: US services */
.notice{background:var(--navy2);color:#fff;padding:22px 0;border-top:1px solid rgba(255,255,255,.06)}
.notice-in{display:flex;align-items:center;gap:20px}
.notice .pill{flex:none;font-family:Sora,sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;background:var(--grad);padding:7px 14px;border-radius:999px}
.notice p{color:#dfe3f1;font-size:1rem}
.notice b{color:#fff}
.notice a{color:#ffb06a;font-weight:600}
@media (max-width:820px){.notice-in{flex-direction:column;align-items:flex-start;gap:12px}}
@media (max-width:980px){.hero .reel.mock{aspect-ratio:auto;padding:22px 16px}}

/* Form: prevent grid blowout on small screens */
.contact>*{min-width:0}
.form input,.form select,.form textarea{width:100%;min-width:0}

/* Recent work */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.shots figure{margin:0}
.frame{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 14px 36px rgba(13,21,51,.1);transition:transform .2s,box-shadow .2s}
.shots figure:hover .frame{transform:translateY(-4px);box-shadow:0 20px 44px rgba(13,21,51,.16)}
.fbar{display:flex;gap:5px;background:#eef0f6;padding:8px 10px}
.fbar i{width:8px;height:8px;border-radius:50%;background:#c9cedd}
.frame img{width:100%;aspect-ratio:1200/658;object-fit:cover;object-position:top;display:block}
.shots figcaption{margin-top:14px}
.shots figcaption b{display:block;font-family:Sora,sans-serif}
.shots figcaption span{color:var(--muted);font-size:.93rem}
@media (max-width:980px){.shots{grid-template-columns:1fr;max-width:560px}}

/* Accessibility */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--navy);font-weight:700;padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .15s}
.skip:focus{top:10px;outline:3px solid var(--pink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.dark a:focus-visible,.hero a:focus-visible,.nav a:focus-visible,.foot a:focus-visible,.notice a:focus-visible{outline-color:#fff}
/* Higher-contrast text colors on light backgrounds */
.sec:not(.dark) .eyebrow{color:#a85400}
.sec:not(.dark) .grad-text{background:linear-gradient(90deg,#c2185b,#a85400);-webkit-background-clip:text;background-clip:text}
.num,.card-cta,.plan small{color:#b3135a}
.card-cta:hover{color:#8f4400}
.chips span,.shots figcaption span{color:#4b5266}
.note{color:#4b5266}

/* Legal pages */
.legal-hero{background:var(--navy);color:#fff;padding:56px 0 44px}
.legal-hero h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.legal-hero .meta{color:var(--muted-d);margin-top:12px;font-size:.95rem}
.legal .narrow-wrap{max-width:820px}
.legal h2{font-size:1.35rem;margin:34px 0 10px;max-width:none}
.legal p,.legal li{color:#2b3145;line-height:1.7}
.legal p{margin-top:10px}
.legal ul{margin:10px 0 0 22px}
.legal li{margin-top:6px}
.legal a{color:#0a4fb5;text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:#06357a}
.legal .sec{padding-top:48px}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9rem}
.legal-links a{color:#dfe3f1;text-decoration:underline;text-underline-offset:3px}
.legal-links a:hover{color:#fff}
.fine{font-size:.82rem;color:var(--muted-d);line-height:1.5}
.fine a{color:#ffb06a}
.foot-in .legal-links{flex-basis:100%}

/* Buttons and badges: darker gradient so white text meets WCAG AA contrast */
.btn,.notice .pill,.steps li::before,.why li::before,.lang-sw:hover{background:linear-gradient(90deg,#c2185b,#b45309)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.browser .langs u:not(.off),.browser .btnm{background:linear-gradient(90deg,#c2185b,#b45309)}
.lang-sw:hover{background:transparent}

/* Portfolio status badges */
.shots figcaption .badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.badge.pub{background:#e3f4ea;color:#14532d}
.badge.demo{background:#fdf0d5;color:#7a3e00}
.shots figcaption b{display:block}
.shots figcaption .live{display:inline-block;margin-top:6px;font-weight:600;color:#0a4fb5;text-decoration:underline;text-underline-offset:2px}

/* Navigation: keep items on one line and switch to the compact menu earlier */
.links a{white-space:nowrap}
@media (max-width:1080px){
  .burger{display:block}
  .links{position:fixed;inset:68px 0 auto 0;background:var(--navy);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;border-bottom:1px solid rgba(255,255,255,.08);transform:translateY(-120%);transition:transform .25s;visibility:hidden}
  .links.open{transform:none;visibility:visible}
  .links a:not(.btn){padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .links .lang-sw{align-self:flex-start;margin:14px 0 0;padding:8px 16px}
  .links .btn{margin-top:14px}
  .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Brand polish: only the three marketing home pages opt in. */
.polished-home{
 --fs-xs:0.8125rem; --fs-sm:0.875rem; --fs-base:1rem; --fs-md:1.125rem;
 --fs-lg:1.375rem; --fs-xl:2rem; --fs-section:clamp(2rem,3vw,2.5rem);
 --fs-display:clamp(1.875rem,2.92vw,2.625rem);
 font-size:var(--fs-base);
}
.polished-home :is(h1,h2,h3){text-wrap:balance}
.polished-home small{font-size:var(--fs-sm)}
.polished-home .eyebrow{font-size:var(--fs-xs)}
.polished-home h2{font-size:var(--fs-section)}
.polished-home .lead{font-size:var(--fs-md)}
.polished-home .note{font-size:var(--fs-sm)}
.polished-home .btn{font-size:var(--fs-base)}
.polished-home .btn-sm{font-size:var(--fs-sm)}
.polished-home .links a{font-size:var(--fs-base)}
.polished-home .hero h1{font-size:var(--fs-display)}
.polished-home .where{font-size:var(--fs-sm)}
.polished-home .reel-ph span{font-size:var(--fs-md)}
.polished-home .brandviz .lines span{font-size:var(--fs-xs)}
.polished-home .chain b{font-size:var(--fs-base)}
.polished-home .num{font-size:var(--fs-sm)}
.polished-home .card h3{font-size:var(--fs-lg)}
.polished-home .feat b{font-size:var(--fs-md)}
.polished-home .feat small{font-size:var(--fs-sm)}
.polished-home .plan h3{font-size:var(--fs-md)}
.polished-home .why li::before{font-size:var(--fs-xs)}
.polished-home .cinfo span{font-size:var(--fs-xs)}
.polished-home .cinfo a{font-size:var(--fs-md)}
.polished-home .form label{font-size:var(--fs-sm)}
.polished-home .foot p{font-size:var(--fs-sm)}
.polished-home .more h3{font-size:var(--fs-lg)}
.polished-home .cta-row .btn{font-size:var(--fs-base)}
.polished-home .cta-band h2{font-size:var(--fs-section)}
.polished-home .cta-band p{font-size:var(--fs-base)}
.polished-home .form input{font-size:var(--fs-base)}
.polished-home .form select{font-size:var(--fs-base)}
.polished-home .form textarea{font-size:var(--fs-base)}
.polished-home .gal figcaption{font-size:var(--fs-sm)}
.polished-home .gal-t{font-size:var(--fs-lg)}
.polished-home .reel-photo .lines span{font-size:var(--fs-xs)}
.polished-home .trust{font-size:var(--fs-sm)}
.polished-home .steps b{font-size:var(--fs-md)}
.polished-home .steps small{font-size:var(--fs-sm)}
.polished-home .faq summary::after{font-size:var(--fs-lg)}
.polished-home .asis-hd b{font-size:var(--fs-base)}
.polished-home .asis-hd small{font-size:var(--fs-xs)}
.polished-home .asis-x{font-size:var(--fs-lg)}
.polished-home .asis-m{font-size:var(--fs-sm)}
.polished-home .asis-cta{font-size:var(--fs-sm)}
.polished-home .asis-chips button{font-size:var(--fs-xs)}
.polished-home .asis-form input{font-size:var(--fs-base)}
.polished-home .asis-paso{font-size:var(--fs-xs)}
.polished-home .lang-sw{font-size:var(--fs-xs)!important}
.polished-home .fine{font-size:var(--fs-xs)}
.polished-home .browser .bar span{font-size:var(--fs-xs)}
.polished-home .browser .pn{font-size:var(--fs-sm)}
.polished-home .browser .langs{font-size:var(--fs-xs)}
.polished-home .browser .h1{font-size:var(--fs-md)}
.polished-home .browser .btnm{font-size:var(--fs-xs)}
.polished-home .notice .pill{font-size:var(--fs-xs)}
.polished-home .notice p{font-size:var(--fs-base)}
.polished-home .shots figcaption span{font-size:var(--fs-sm)}
.polished-home .shots figcaption .badge{font-size:var(--fs-xs)}

.polished-home :is(.eyebrow,.cinfo span,.asis-paso,.notice .pill,.shots figcaption .badge,.lang-sw){font-size:var(--fs-sm)!important;text-transform:none;letter-spacing:.02em}
.polished-home .where{letter-spacing:.02em}
.polished-home h2{max-width:1040px;font-size:var(--fs-section)}
.polished-home .hero-in{max-width:1400px;grid-template-columns:minmax(0,31fr) minmax(0,35fr);gap:40px}
.polished-home .hero{padding:48px 0 56px}
.polished-home .hero h1{font-size:var(--fs-display);line-height:1.16}
.polished-home .hero .reel{aspect-ratio:7/6;width:100%;margin:0}
.polished-home .hero-copy{min-width:0}
.polished-home .reel-photo img{object-fit:cover}
.polished-home :is(.btn,.reel,.browser,.card,.frame,.chain .ci,.play):not(:hover){box-shadow:none}
.polished-home .brandviz img{filter:none}
.polished-home .card li{border-top:0;padding-top:10px;padding-bottom:10px}
.polished-home .reel-photo .lines span{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(13,21,51,.9)}
.polished-home .sec:not(.dark) .eyebrow{color:#a85400}
.polished-home .sec:not(.dark) .grad-text{background:linear-gradient(90deg,#c2185b,#a85400);background-clip:text;-webkit-background-clip:text}
.polished-home :is(.num,.card-cta,.plan small){color:#b3135a}
.polished-home .card-cta:hover{color:#8f4400}
.polished-home .btn,.polished-home .steps li::before,.polished-home .why li::before,.polished-home .asis-send,.polished-home .asis-m.yo{background:linear-gradient(90deg,#c2185b,#b45309)}
.polished-home .btn-ghost{background:transparent}
.polished-home .btn-ghost:hover{background:rgba(255,255,255,.08)}
.polished-home .form ::placeholder{color:#aab3d1;opacity:1}
.polished-home .asis-cta{color:var(--navy)}
.polished-home .lang-sw{color:#fff}
.polished-home :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid #c2185b;outline-offset:3px}
.polished-home :is(.dark,.hero,.nav,.foot,.notice,.asis) :is(a,button,summary,input,select,textarea):focus-visible{outline-color:#fff}
.polished-home .wa-float:focus-visible{outline-color:var(--navy)}
@media(max-width:980px){
 .polished-home .hero-in{display:flex;gap:0}
 .polished-home .hero .reel{aspect-ratio:4/3;margin-top:26px}
 .polished-home .hero h1{max-width:700px}
}
@media(max-width:600px){
 .polished-home .hero{padding:36px 0 44px}
 .polished-home .cta-row .btn{white-space:normal;font-size:var(--fs-base)}
 .polished-home .hero .reel{aspect-ratio:4/3}
}
/* Default hidden on mobile also covers the assistant inserted after main.js. */
@media(max-width:820px){
 .polished-home .wa-float,.polished-home .asis-btn{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s}
 .polished-home.floats-visible .wa-float,.polished-home.floats-visible .asis-btn{opacity:1;visibility:visible;transform:none}
 .polished-home.asis-abierto .wa-float,.polished-home .asis.open .asis-btn{opacity:0;visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
 .polished-home *, .polished-home *::before,.polished-home *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .polished-home .rv{opacity:1;transform:none}
 .polished-home .gal figure:hover img{transform:none}
}

/* USA: short headline and a larger browser illustration. */
.polished-home{--fs-display:clamp(2rem,2.78vw,2.5rem)}
.polished-home .hero .reel.mock{padding:18px}
.polished-home .browser{max-width:none}
.polished-home .browser .hl{height:190px}
.polished-home .browser .page{padding:24px}
.polished-home .browser .tiles span{height:70px}
.polished-home .browser .bar span{color:#5b6275}
@media(max-width:600px){
 .polished-home .hero .reel.mock{aspect-ratio:auto;padding:14px}
 .polished-home .browser .hl{height:110px}
 .polished-home .browser .page{padding:16px}
 .polished-home .browser .tiles span{height:46px}
}

.polished-home .legal-links{font-size:var(--fs-sm)}
.polished-home .nav .btn{color:#fff}