/* Oba Sites — estilos, responsividade e acessibilidade */
@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Outfit:wght@600;700;800&display=swap";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}
}
}
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}
}
@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}
::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}
html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}
small{font-size:80%}
sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
:-moz-focusring{outline:auto}
progress{vertical-align:baseline}
summary{display:list-item}
ol,ul,menu{list-style:none}
img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}
img,video{max-width:100%;height:auto}
button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
:where(select:is([multiple],[size])) optgroup{font-weight:bolder}
:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}
::file-selector-button{margin-inline-end:4px}
::placeholder{opacity:1}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}
@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}
}
}
textarea{resize:vertical}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}
::-webkit-datetime-edit{display:inline-flex}
::-webkit-datetime-edit-fields-wrapper{padding:0}
::-webkit-datetime-edit{padding-block:0}
::-webkit-datetime-edit-year-field{padding-block:0}
::-webkit-datetime-edit-month-field{padding-block:0}
::-webkit-datetime-edit-day-field{padding-block:0}
::-webkit-datetime-edit-hour-field{padding-block:0}
::-webkit-datetime-edit-minute-field{padding-block:0}
::-webkit-datetime-edit-second-field{padding-block:0}
::-webkit-datetime-edit-millisecond-field{padding-block:0}
::-webkit-datetime-edit-meridiem-field{padding-block:0}
::-webkit-calendar-picker-indicator{line-height:1}
:-moz-ui-invalid{box-shadow:none}
button,input:where([type=button],[type=reset],[type=submit]){appearance:button}
::file-selector-button{appearance:button}
::-webkit-inner-spin-button{height:auto}
::-webkit-outer-spin-button{height:auto}
[hidden]:where(:not([hidden=until-found])){display:none!important}
}
@layer components;@layer utilities{.visible{visibility:visible}
.relative{position:relative}
.start{inset-inline-start:var(--spacing)}
.container{width:100%}
@media (width>=40rem){.container{max-width:40rem}
}
@media (width>=48rem){.container{max-width:48rem}
}
@media (width>=64rem){.container{max-width:64rem}
}
@media (width>=80rem){.container{max-width:80rem}
}
@media (width>=96rem){.container{max-width:96rem}
}
.table{display:table}
.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}
.resize{resize:both}
}
:root{--ink:#17152b;--purple:#5b2be0;--coral:#ff5a36;--yellow:#ffd84a;--cream:#fff8f1;--white:#fff;--muted:#6d6879;--line:#e9e4df;--green:#25d366;--radius:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{color:var(--ink);background:#fff;margin:0;font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden}
body,button,input,select,textarea{font:inherit}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{color:inherit}
.container{width:min(1160px,100% - 40px);margin-inline:auto}
.section{padding:105px 0}
.icon{flex:none;width:24px;height:24px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{letter-spacing:-.025em;font-family:Outfit,Arial,sans-serif;line-height:1.08}
h2{margin-bottom:22px;font-size:clamp(2.35rem,4.8vw,4.25rem)}
h3{font-size:1.35rem}
.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin-bottom:20px;font-size:.75rem;font-weight:800;line-height:1.4}
.eyebrow.light{color:var(--yellow)}
.button{background:var(--purple);color:#fff;cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:15px 24px;font-size:.93rem;font-weight:800;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}
.button:hover{transform:translateY(-2px);box-shadow:0 11px 24px #5b2be033}
.button .icon{width:19px}
.button-small{padding:11px 19px;font-size:.85rem}
.button-ghost{color:var(--ink);background:0 0;border:1.5px solid #cbc5d4}
.button-ghost:hover{border-color:var(--purple);box-shadow:none}
.button-coral{background:var(--coral)}
.button-coral:hover{box-shadow:0 11px 24px #ff5a3638}
.button-dark{background:var(--ink)}
.button-yellow{background:var(--yellow);color:var(--ink)}
.skip-link{z-index:9999;background:var(--ink);color:#fff;border-radius:8px;padding:12px 18px;position:fixed;top:-80px;left:20px}
.skip-link:focus{top:15px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.header{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:100;background:#ffffffeb;border-bottom:1px solid #17152b12;height:82px;position:fixed;inset:0 0 auto}
.header-inner{justify-content:space-between;align-items:center;height:100%;display:flex}
.brand img{width:150px;height:auto}
.nav{align-items:center;gap:30px;font-size:.87rem;font-weight:700;display:flex}
.nav>a:not(.button):hover{color:var(--purple)}
.menu-button{background:var(--cream);border:0;border-radius:50%;width:42px;height:42px;padding:10px;display:none}
.menu-button span{background:var(--ink);border-radius:5px;width:100%;height:2px;margin:5px 0;display:block}
.hero{background:var(--cream);min-height:790px;padding:165px 0 95px;position:relative;overflow:hidden}
.hero:before{content:"";background:#ffd84a2e;border-radius:50%;width:620px;height:620px;position:absolute;top:60px;right:-230px}
.hero-grid{grid-template-columns:1.02fr .98fr;align-items:center;gap:55px;display:grid;position:relative}
.hero-copy{z-index:2;position:relative}
.hero h1{max-width:720px;margin-bottom:25px;font-size:clamp(3.2rem,6.7vw,6rem)}
.hero h1 span{color:var(--purple);position:relative}
.hero h1 span:after{content:"";background:var(--yellow);z-index:-1;border-radius:5px;width:100%;height:7px;position:absolute;bottom:2px;left:0}
.hero-lead{color:#5e596a;max-width:620px;margin-bottom:30px;font-size:1.11rem}
.hero-actions{flex-wrap:wrap;gap:12px;display:flex}
.hero-facts{border-top:1px solid #dfd8d0;grid-template-columns:repeat(4,1fr);gap:0;margin:36px 0 15px;padding-top:26px;display:grid}
.hero-facts span{color:#777181;padding-right:10px;font-size:.7rem;line-height:1.35}
.hero-facts strong{color:var(--ink);font-family:Outfit;font-size:1rem;display:block}
.hero-copy>small{color:#8a8490;max-width:610px;font-size:.68rem;display:block}
.hero-dot{color:var(--coral);font-family:Outfit;font-size:3.5rem;font-weight:800;position:absolute;transform:rotate(12deg)}
.dot-one{top:17%;left:4%}
.dot-two{color:var(--purple);bottom:8%;right:5%}
.hero-visual{height:540px;position:relative}
.browser-mock{border:9px solid var(--ink);background:#fff;border-radius:20px;width:520px;height:350px;position:absolute;top:45px;right:0;overflow:hidden;transform:rotate(1.4deg);box-shadow:0 25px 60px #17152b29}
.browser-bar{background:#eeedf2;align-items:center;gap:5px;height:32px;padding:0 12px;display:flex}
.browser-bar i{background:#b7b3bf;border-radius:50%;width:7px;height:7px}
.browser-bar i:first-child{background:var(--coral)}
.browser-bar span{text-align:center;color:#8c8792;background:#fff;border-radius:10px;width:210px;margin-left:55px;padding:3px;font-size:7px}
.mock-nav{justify-content:space-between;align-items:center;height:50px;padding:12px 22px;font-size:7px;display:flex}
.mock-nav b{color:var(--purple);font-size:17px}
.mock-content{background:#f3efff;grid-template-columns:1.1fr .9fr;gap:15px;height:calc(100% - 82px);padding:32px 26px 20px;display:grid}
.mock-content em{color:var(--purple);letter-spacing:1px;font-size:6px;font-style:normal;font-weight:800}
.mock-content h2{margin:12px 0 9px;font-size:29px}
.mock-content p{color:#645f6c;max-width:170px;font-size:8px}
.mock-content b{background:var(--purple);color:#fff;border-radius:20px;padding:8px 12px;font-size:7px;display:inline-block}
.mock-photo{background:linear-gradient(145deg,#ff8a68,#ff5a36);border-radius:50% 50% 15px;position:relative;overflow:hidden}
.mock-photo:before,.mini-photo:before{content:"";background:var(--yellow);border-radius:50% 50% 20% 20%;position:absolute;inset:18% 28% -15%}
.mock-photo:after,.mini-photo:after{content:"";aspect-ratio:1;background:#91542d;border-radius:50%;width:45%;position:absolute;top:9%;left:27%}
.mock-photo span{color:#fff;z-index:2;font-family:Outfit;font-size:50px;position:absolute;top:5px;right:12px}
.phone-mock{background:var(--ink);border:7px solid var(--ink);z-index:3;border-radius:31px;width:165px;height:350px;position:absolute;bottom:15px;left:-5px;overflow:hidden;transform:rotate(-5deg);box-shadow:0 20px 45px #17152b40}
.phone-notch{background:var(--ink);z-index:4;border-radius:0 0 12px 12px;width:70px;height:17px;position:absolute;top:0;left:50%;translate:-50%}
.phone-screen{background:#fff;border-radius:23px;height:100%;padding:25px 13px 12px}
.phone-screen>b{color:var(--purple);font-size:12px}
.mini-photo{background:linear-gradient(145deg,var(--yellow),#ff8a68);border-radius:9px;height:135px;margin:14px -4px 16px;font-size:0;position:relative;overflow:hidden}
.phone-screen h3{margin-bottom:13px;font-size:17px}
.phone-screen>span{color:#fff;background:var(--coral);border-radius:15px;padding:7px 12px;font-size:7px}
.online-card{z-index:4;background:#fff;border-radius:14px;align-items:center;gap:10px;padding:13px 17px;display:flex;position:absolute;bottom:45px;right:-10px;box-shadow:0 14px 30px #17152b26}
.online-card i{color:#159748;background:#dcf8e5;border-radius:50%;place-items:center;width:30px;height:30px;font-style:normal;font-weight:800;display:grid}
.online-card span{color:#797481;font-size:9px}
.online-card strong{color:var(--ink);font-size:11px;display:block}
.spark{color:var(--yellow);font-size:30px;position:absolute}
.spark-a{top:2px;right:18px}
.spark-b{color:var(--coral);top:45px;left:35px}
.section-heading{max-width:700px;margin-bottom:50px}
.section-heading.center{text-align:center;margin:0 auto 55px}
.section-heading>p:not(.eyebrow){color:var(--muted)}
.benefit-grid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}
.benefit-card{border:1px solid var(--line);border-radius:var(--radius);padding:32px 25px;transition:transform .25s,border .25s}
.benefit-card:hover{border-color:#cfc4f2;transform:translateY(-5px)}
.benefit-card h3{margin:22px 0 12px}
.benefit-card p{color:var(--muted);margin:0;font-size:.88rem}
.icon-box{width:52px;height:52px;color:var(--purple);background:#eee8ff;border-radius:15px;place-items:center;display:grid}
.color-1{color:#149b48;background:#e2faeb}
.color-2{color:#896c00;background:#fff1c0}
.color-3{color:var(--coral);background:#ffe7e1}
.problem{background:#f8f7fb}
.problem-grid{grid-template-columns:.88fr 1.12fr;align-items:center;gap:90px;display:grid}
.problem-grid>div:last-child>p:not(.eyebrow){color:var(--muted);max-width:610px;font-size:1.03rem}
.problem-art{background:var(--yellow);border-radius:50% 50% 18%;place-items:center;height:450px;display:grid;position:relative}
.search-card{z-index:2;background:#fff;border-radius:18px;width:88%;padding:22px;position:relative;transform:rotate(-3deg);box-shadow:0 22px 45px #17152b29}
.search-line{color:#77717e;border:1px solid #ded9e6;border-radius:20px;align-items:center;gap:9px;padding:10px 14px;font-size:.7rem;display:flex}
.search-line .icon{width:14px}
.result{background:#eee8ff;border-radius:13px;align-items:center;gap:12px;margin-top:13px;padding:14px;display:flex}
.result i{background:var(--purple);color:#fff;border-radius:8px;padding:7px;font-size:.7rem;font-style:normal}
.result span{color:#6f6a76;font-size:.62rem}
.result strong{color:var(--ink);font-size:.8rem;display:block}
.result.muted{opacity:.6;background:#f4f3f5}
.result.muted i{background:#b4afba}
.big-bang{color:var(--coral);font-family:Outfit;font-size:110px;font-weight:800;position:absolute;top:-50px;right:-25px;transform:rotate(10deg)}
.result-list{gap:20px;margin:35px 0 0;padding:0;list-style:none;display:grid}
.result-list li{align-items:center;gap:18px;display:flex}
.result-list li>.icon{width:27px;height:27px;color:var(--purple)}
.result-list span{color:var(--muted);font-size:.81rem}
.result-list strong{color:var(--ink);font-size:1rem;display:block}
.pricing{background:var(--cream)}
.price-grid{grid-template-columns:repeat(3,1fr);align-items:start;gap:20px;display:grid}
.price-card{border:1px solid var(--line);background:#fff;border-radius:26px;padding:34px 30px;position:relative;overflow:hidden}
.price-card.featured{border:2px solid var(--coral);padding-top:75px;box-shadow:0 25px 50px #ff5a3617}
.launch-ribbon{background:var(--coral);color:#fff;text-align:center;text-transform:uppercase;letter-spacing:.08em;padding:12px;font-size:.78rem;font-weight:800;position:absolute;inset:0 0 auto}
.plan-tag{color:var(--purple);text-transform:uppercase;letter-spacing:.06em;background:#eee9ff;border-radius:20px;margin-bottom:20px;padding:6px 11px;font-size:.64rem;font-weight:800;display:inline-block}
.price-card h3{margin-bottom:10px;font-size:1.8rem}
.plan-desc{color:var(--muted);min-height:70px;font-size:.84rem}
.price{border-bottom:1px solid var(--line);flex-direction:column;padding:18px 0 22px;display:flex}
.price small{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-size:.6rem;font-weight:800}
.price strong{font-family:Outfit;font-size:2.4rem;line-height:1.15}
.price span{color:var(--muted);font-size:.67rem}
.price-card ul{min-height:420px;margin:0;padding:22px 0 12px;list-style:none}
.price-card li{align-items:flex-start;gap:9px;margin-bottom:12px;font-size:.78rem;display:flex}
.price-card li .icon{color:#14984b;background:#e6f9ec;border-radius:50%;width:17px;height:17px;padding:2px}
.price-card>.button{width:100%;padding-inline:12px;font-size:.77rem}
.hosting{background:var(--cream);padding-top:0}
.hosting-card{background:var(--ink);color:#fff;border-radius:35px;grid-template-columns:1fr 1fr;gap:70px;padding:62px;display:grid;position:relative;overflow:hidden}
.hosting-card:after{content:"!";color:#ffffff06;font-family:Outfit;font-size:300px;font-weight:800;position:absolute;top:-90px;left:35%}
.hosting-card h2{font-size:clamp(2.4rem,4.5vw,4rem)}
.hosting-card>div>p:not(.eyebrow){color:#c5c1d0;max-width:510px}
.hosting-note{border-left:3px solid var(--yellow);padding-left:12px;font-size:.72rem}
.hosting-prices{z-index:2;grid-template-columns:1fr 1.2fr;gap:12px;display:grid;position:relative}
.hosting-prices article{background:#29263d;border-radius:18px;flex-direction:column;justify-content:center;padding:24px;display:flex}
.hosting-prices article>span{color:#c5c1d0;font-size:.73rem}
.hosting-prices article>strong{font-family:Outfit;font-size:2.15rem}
.hosting-prices article small{color:#c5c1d0;font:600 .65rem Manrope}
.hosting-prices .discount{background:var(--purple);position:relative}
.discount>b{background:var(--yellow);color:var(--ink);border-radius:18px 0 12px;padding:6px 10px;font-size:.56rem;position:absolute;top:0;left:0}
.discount>p{color:#d8d0f6;margin:0;font-size:.63rem}
.ssl{background:#ffffff17;border-radius:16px;grid-column:1/-1;align-items:center;gap:14px;padding:16px 20px;display:flex}
.ssl>.icon{color:var(--yellow)}
.ssl span{color:#c5c1d0;font-size:.68rem}
.ssl strong{color:#fff;font-size:.82rem;display:block}
.steps-grid{grid-template-columns:repeat(4,1fr);gap:25px;display:grid;position:relative}
.steps-grid:before{content:"";background:#d9d1ed;height:2px;position:absolute;top:29px;left:8%;right:8%}
.steps-grid article{text-align:center;padding:0 10px;position:relative}
.steps-grid article>span{width:60px;height:60px;color:var(--purple);z-index:2;background:#eee8ff;border:5px solid #fff;border-radius:50%;place-items:center;margin:0 auto 25px;font-family:Outfit;font-weight:800;display:grid;position:relative}
.steps-grid article:last-child>span{background:var(--coral);color:#fff}
.steps-grid h3{margin-bottom:10px;font-size:1.1rem}
.steps-grid p{color:var(--muted);font-size:.8rem}
.deadline{text-align:center;background:var(--cream);max-width:690px;color:var(--muted);border-radius:12px;margin:35px auto 0;padding:13px;font-size:.72rem}
.audience{background:#f5f2ff}
.audience-grid{grid-template-columns:.9fr 1.1fr;align-items:center;gap:100px;display:grid}
.audience-grid>div:first-child>p:not(.eyebrow){color:var(--muted)}
.text-link{color:var(--purple);align-items:center;gap:10px;margin-top:15px;font-weight:800;display:inline-flex}
.text-link .icon{width:19px}
.audience-list{background:#fff;border-radius:24px;padding:10px 30px;box-shadow:0 20px 45px #3c1e820f}
.audience-list>div{border-bottom:1px solid var(--line);grid-template-columns:38px 1fr 24px;align-items:center;padding:18px 0;font-weight:700;display:grid}
.audience-list>div:last-child{border:0}
.audience-list span{color:var(--coral);font-size:.67rem;font-weight:800}
.audience-list .icon{width:20px;color:var(--purple)}
.styles{overflow:hidden}
.styles-scroll{scroll-snap-type:x mandatory;scrollbar-color:#c8c1db transparent;gap:20px;padding:5px 2px 25px;display:flex;overflow-x:auto}
.style-card{scroll-snap-align:start;min-width:310px}
.style-browser{background:#eae6ef;border-radius:18px;height:270px;padding:10px;box-shadow:0 14px 28px #17152b17}
.browser-dots{color:#aaa4b0;height:19px;font-size:15px;line-height:8px}
.style-inner{background:#e8fbf1;border-radius:9px;height:230px;padding:20px;position:relative;overflow:hidden}
.style-inner>b{color:#08794f;font-family:Outfit;font-size:1rem}
.style-inner>small{text-transform:uppercase;letter-spacing:.1em;margin-top:28px;font-size:.45rem;font-weight:800;display:block}
.style-inner h3{width:62%;margin:8px 0 13px;font-size:1.5rem}
.style-inner>span{color:#fff;background:#08794f;border-radius:10px;padding:6px 10px;font-size:.55rem}
.style-shape{color:#ffffffa6;background:#5dd9a0;border-radius:50% 50% 0;place-items:center;width:145px;height:180px;font:800 100px Outfit;display:grid;position:absolute;bottom:-25px;right:-25px}
.build .style-inner{background:#fff0db}
.build .style-inner>b,.build .style-inner>span{color:#fff;background:#b76b18}
.build .style-shape{background:#f1a747}
.health .style-inner{background:#e9f7ff}
.health .style-inner>b{color:#176798}
.health .style-inner>span{background:#176798}
.health .style-shape{background:#74c7eb}
.service .style-inner{background:#fff9cc}
.service .style-inner>b{color:#292c68}
.service .style-inner>span{background:#292c68}
.service .style-shape{background:#ffdd37}
.food .style-inner{background:#ffeae1}
.food .style-inner>b{color:#9b351f}
.food .style-inner>span{background:#9b351f}
.food .style-shape{background:#ff7b5d}
.style-card>p{margin:13px 5px 0;font-weight:800}
.style-card>p small{color:var(--muted);font-size:.68rem;font-weight:500;display:block}
.faq{background:var(--cream)}
.faq-grid{grid-template-columns:.7fr 1.3fr;align-items:start;gap:90px;display:grid}
.faq-grid>div:first-child{position:sticky;top:130px}
.faq-grid>div:first-child>p:not(.eyebrow){color:var(--muted)}
.faq-grid .button{margin-top:18px}
.faq-list details{border-bottom:1px solid #ded7d1}
.faq-list summary{cursor:pointer;justify-content:space-between;gap:20px;padding:24px 0;font-family:Outfit;font-size:1.1rem;font-weight:700;list-style:none;display:flex}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font:400 1.6rem Manrope;transition:transform .2s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{color:var(--muted);margin:0;padding:0 45px 22px 0;font-size:.86rem}
.quote{background:#fff}
.quote-grid{grid-template-columns:.75fr 1.25fr;align-items:start;gap:90px;display:grid}
.quote-grid>div>p:not(.eyebrow){color:var(--muted)}
.direct-contact{align-items:center;gap:14px;margin-top:35px;display:flex}
.direct-contact>span{width:50px;height:50px;color:var(--green);background:#e7faee;border-radius:50%;place-items:center;display:grid}
.direct-contact svg{width:26px}
.direct-contact small{color:var(--muted);font-size:.7rem;display:block}
.direct-contact a{font-weight:800}
.quote form{background:#f8f7fb;border-radius:26px;padding:32px}
.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}
.quote label{margin-bottom:16px;font-size:.74rem;font-weight:800;display:block}
.quote input,.quote select,.quote textarea{width:100%;color:var(--ink);background:#fff;border:1px solid #dcd7e2;border-radius:11px;outline:none;margin-top:6px;padding:12px 14px;display:block}
.quote textarea{resize:vertical}
.quote input:focus,.quote select:focus,.quote textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px #5b2be01a}
.quote input::placeholder,.quote textarea::placeholder{color:#aaa5b1;font-size:.8rem}
.form-status{color:var(--purple);min-height:18px;margin:12px 0 0;font-size:.72rem;font-weight:700}
.final-cta{padding-top:15px}
.final-card{background:var(--purple);color:#fff;border-radius:35px;grid-template-columns:70px 1fr auto;align-items:center;gap:34px;padding:65px;display:grid;position:relative;overflow:hidden}
.final-card:after{content:"";background:#ffffff0d;border-radius:50%;width:280px;height:280px;position:absolute;top:-130px;right:-110px}
.cta-bang{color:var(--coral);font:800 100px/1 Outfit;transform:rotate(8deg)}
.final-card h2{max-width:650px;margin-bottom:12px;font-size:clamp(2rem,3.5vw,3.3rem)}
.final-card p:not(.eyebrow){color:#ddd5f7;max-width:670px;margin:0}
.final-card>div:last-child{z-index:2;position:relative}
.final-card small{text-align:center;color:#ddd5f7;margin-top:10px;font-size:.67rem;display:block}
.footer{background:var(--ink);color:#fff;margin-top:100px;padding:65px 0 25px}
.footer-main{grid-template-columns:1.8fr 1fr 1.4fr 1fr;gap:45px;display:grid}
.footer-main img{filter:brightness(0)invert();width:170px}
.footer-main p{color:#aca8b9;margin-top:14px;font-size:.8rem}
.footer-main h3{text-transform:uppercase;letter-spacing:.09em;color:var(--yellow);margin-bottom:17px;font:800 .72rem Manrope}
.footer-main>div:not(:first-child){flex-direction:column;align-items:flex-start;gap:9px;display:flex}
.footer-main a{color:#d5d2dc;font-size:.77rem}
.footer-main a:hover{color:#fff}
.footer-bottom{color:#8e8a9b;border-top:1px solid #393649;justify-content:space-between;margin-top:50px;padding-top:22px;font-size:.65rem;display:flex}
.whatsapp-float{background:var(--green);color:#fff;z-index:90;border-radius:50%;place-items:center;width:58px;height:58px;animation:2.4s infinite pulse;display:grid;position:fixed;bottom:22px;right:22px;box-shadow:0 10px 28px #0003}
.whatsapp-float svg{width:31px}
.mobile-cta{display:none}
@keyframes pulse{50%{opacity:.5}
}
@media (width<=1000px){.section{padding:85px 0}
.hero-grid{grid-template-columns:1fr}
.hero{padding-top:145px}
.hero-copy{text-align:center}
.hero-copy .eyebrow,.hero-lead,.hero-copy>small{margin-left:auto;margin-right:auto}
.hero-actions{justify-content:center}
.hero-facts{max-width:660px;margin-inline:auto}
.hero-visual{width:100%;max-width:650px;height:500px;margin:auto}
.browser-mock{width:90%;right:0}
.phone-mock{left:4%}
.benefit-grid{grid-template-columns:repeat(2,1fr)}
.problem-grid{gap:50px}
.price-grid{grid-template-columns:1fr;max-width:650px;margin:auto}
.price-card ul{min-height:auto}
.hosting-card{grid-template-columns:1fr}
.audience-grid,.faq-grid,.quote-grid{gap:55px}
.final-card{grid-template-columns:60px 1fr}
.final-card>div:last-child{grid-column:2}
.footer-main{grid-template-columns:1.5fr 1fr 1.3fr}
}
@media (width<=760px){.container{width:min(100% - 28px,600px)}
.section{padding:72px 0}
h2{font-size:2.35rem}
.header{height:72px}
.brand img{width:125px}
.menu-button{display:block}
.nav{border:1px solid var(--line);background:#fff;border-radius:18px;flex-direction:column;align-items:stretch;gap:0;padding:17px;display:none;position:absolute;top:72px;left:14px;right:14px;box-shadow:0 15px 40px #17152b21}
.nav.open{display:flex}
.nav>a{padding:11px 10px}
.nav .button{margin-top:8px}
.hero{min-height:0;padding:120px 0 65px}
.hero h1{font-size:3.25rem}
.hero-lead{font-size:.95rem}
.hero-actions{display:grid}
.hero-facts{text-align:left;grid-template-columns:1fr 1fr;gap:17px}
.hero-visual{height:380px;margin-top:30px}
.browser-mock{border-width:6px;width:96%;height:275px;top:20px}
.browser-bar{height:25px}
.browser-bar span{margin-left:15px}
.mock-nav{height:37px;padding:8px 15px}
.mock-content{height:calc(100% - 62px);padding:22px 17px}
.mock-content h2{font-size:20px}
.phone-mock{border-width:5px;border-radius:23px;width:118px;height:245px;bottom:4px;left:0}
.phone-notch{width:45px;height:12px}
.phone-screen{border-radius:17px;padding:20px 9px 8px}
.mini-photo{height:90px;margin:9px -2px 11px}
.phone-screen h3{font-size:12px}
.online-card{padding:8px 11px;bottom:20px;right:0}
.online-card i{width:25px;height:25px}
.hero-dot{display:none}
.benefit-grid{grid-template-columns:1fr}
.benefit-card{padding:25px}
.problem-grid{grid-template-columns:1fr}
.problem-art{order:2;height:340px}
.big-bang{font-size:80px}
.price-card{padding:28px 22px}
.price-card.featured{padding-top:70px}
.hosting-card{gap:30px;padding:35px 23px}
.hosting-prices{grid-template-columns:1fr}
.ssl{grid-column:auto}
.steps-grid{grid-template-columns:1fr 1fr;row-gap:35px}
.steps-grid:before{display:none}
.audience-grid,.faq-grid,.quote-grid{grid-template-columns:1fr}
.audience-grid{gap:35px}
.audience-list{padding:5px 20px}
.faq-grid>div:first-child{position:static}
.form-row{grid-template-columns:1fr;gap:0}
.quote form{padding:23px 18px}
.final-card{text-align:center;grid-template-columns:1fr;gap:10px;padding:40px 24px}
.cta-bang{font-size:70px}
.final-card>div:last-child{grid-column:auto}
.footer{margin-top:70px;padding-bottom:90px}
.footer-main{grid-template-columns:1fr 1fr}
.footer-main>div:first-child{grid-column:1/-1}
.footer-bottom{flex-direction:column;gap:8px}
.whatsapp-float{display:none}
.mobile-cta{z-index:90;background:var(--green);color:#fff;border-radius:15px;justify-content:center;align-items:center;gap:10px;height:55px;font-weight:800;display:flex;position:fixed;bottom:10px;left:12px;right:12px;box-shadow:0 12px 30px #0003}
.mobile-cta svg{width:25px}
.styles-scroll{margin-right:-14px}
.style-card{min-width:280px}
}
@media (width<=430px){.hero h1{font-size:2.8rem}
.hero-visual{height:340px}
.browser-mock{height:245px}
.mock-content h2{font-size:17px}
.phone-mock{width:104px;height:215px}
.mini-photo{height:75px}
.steps-grid,.footer-main{grid-template-columns:1fr}
.footer-main>div:first-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,:before,:after{transition:none!important;animation:none!important}
}
.legal-page{background:var(--cream);min-height:100vh;padding:55px 20px 90px}
.legal-logo{width:160px;margin:0 auto 55px;display:block}
.legal-page article{border:1px solid var(--line);background:#fff;border-radius:28px;max-width:820px;margin:auto;padding:clamp(30px,6vw,70px)}
.legal-page h1{margin-bottom:30px;font-size:clamp(2.5rem,6vw,4.5rem)}
.legal-page h2{margin:35px 0 10px;font-size:1.5rem}
.legal-page p{color:var(--muted)}
.legal-page p a{color:var(--purple);font-weight:800}
.legal-page .button{margin-top:20px}
@property --tw-rotate-x{syntax:"*";inherits:false}
@property --tw-rotate-y{syntax:"*";inherits:false}
@property --tw-rotate-z{syntax:"*";inherits:false}
@property --tw-skew-x{syntax:"*";inherits:false}
@property --tw-skew-y{syntax:"*";inherits:false}



/* Formulário de conversão no hero */
.hero-form-wrap{z-index:2;position:relative;display:flex;justify-content:flex-end}
.hero-form{width:min(100%,470px);background:#fff;border:1px solid #ebe6ef;border-radius:28px;padding:34px;box-shadow:0 24px 70px #17152b1f}
.hero-form-kicker{text-transform:uppercase;letter-spacing:.12em;color:var(--purple);margin:0 0 7px;font-size:.69rem;font-weight:800}
.hero-form h2{margin:0 0 8px;font-size:clamp(2rem,3.2vw,2.75rem);line-height:1.02}
.hero-form-intro{color:var(--muted);margin:0 0 22px;font-size:.82rem;line-height:1.55}
.hero-form label{margin-bottom:13px;font-size:.72rem;font-weight:800;display:block}
.hero-form input{width:100%;color:var(--ink);background:#fff;border:1px solid #dcd7e2;border-radius:11px;outline:none;margin-top:6px;padding:12px 14px;font:500 .86rem Manrope;display:block;transition:border-color .2s,box-shadow .2s}
.hero-form input:focus{border-color:var(--purple);box-shadow:0 0 0 3px #5b2be01a}
.hero-form input::placeholder{color:#aaa5b1;font-size:.8rem}
.hero-form-button{width:100%;justify-content:center;margin-top:4px}
.hero-form-note{color:#8a8490;text-align:center;margin:10px 0 0;font-size:.64rem;line-height:1.45}
.hero-form-status{min-height:18px;color:var(--purple);text-align:center;margin:8px 0 0;font-size:.7rem;font-weight:800}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

@media (width<=1000px){
 .hero-form-wrap{justify-content:center;margin-top:10px}
 .hero-form{width:min(100%,560px)}
}
@media (width<=760px){
 .hero-form{border-radius:22px;padding:24px 18px}
 .hero-form h2{font-size:2rem}
}


/* Ajuste 10/09/2026: hero mais chamativo e compacto no desktop */
@media (width>=1001px){
  .hero{
    min-height:calc(100vh - 86px);
    padding:82px 0 34px;
    background:
      radial-gradient(circle at 88% 18%, rgba(255,255,255,.34), transparent 29%),
      linear-gradient(135deg,#ffd84a 0%,#ffbd3f 48%,#ff9652 100%);
    display:flex;
    align-items:center;
  }
  .hero:before{
    width:520px;
    height:520px;
    top:-120px;
    right:-110px;
    background:#ffffff24;
  }
  .hero-grid{
    grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr);
    gap:42px;
    width:100%;
  }
  .hero h1{
    max-width:680px;
    margin-bottom:17px;
    font-size:clamp(3.55rem,5vw,4.9rem);
    line-height:.93;
    letter-spacing:-.04em;
  }
  .hero-lead{
    max-width:590px;
    margin-bottom:20px;
    font-size:1rem;
    color:#37313c;
  }
  .hero-actions{gap:10px}
  .hero-facts{
    margin:24px 0 10px;
    padding-top:18px;
    border-top-color:#1d17351f;
  }
  .hero-copy>small{color:#4f4855}
  .hero-form{
    width:min(100%,445px);
    border-radius:24px;
    padding:26px;
    box-shadow:0 22px 60px #3a1d211f;
  }
  .hero-form h2{font-size:2.15rem}
  .hero-form-intro{margin-bottom:16px}
  .hero-form label{margin-bottom:9px}
  .hero-form input{padding:10px 12px}
  .hero-form-note{margin-top:8px}
}

/* Laptop baixo: ainda mais compacto para preservar a primeira dobra */
@media (width>=1001px) and (height<=800px){
  .hero{padding:62px 0 24px}
  .hero h1{font-size:clamp(3.15rem,4.4vw,4.35rem)}
  .hero-lead{font-size:.94rem;margin-bottom:16px}
  .hero-facts{margin-top:18px;padding-top:14px}
  .hero-form{padding:22px}
  .hero-form h2{font-size:1.95rem}
  .hero-form-intro{font-size:.76rem;margin-bottom:12px}
  .hero-form label{font-size:.68rem;margin-bottom:7px}
  .hero-form input{padding:9px 11px}
  .hero-form-button{padding-block:11px}
}

/* Mantém o mobile mais suave que o desktop */
@media (width<=1000px){
  .hero{
    background:
      radial-gradient(circle at 90% 10%, rgba(255,255,255,.4), transparent 26%),
      linear-gradient(180deg,#fff3bd 0%,#fff8eb 100%);
  }
}


/* =========================================================
   VERSÃO FINAL HERO — identidade Oba Sites
   Laranja do logo + azul-marinho + textos claros
   ========================================================= */
@media (width>=1001px){
  .hero{
    background:
      radial-gradient(circle at 88% 15%, rgba(255,255,255,.10), transparent 28%),
      linear-gradient(120deg,#ff7048 0%,#ff5a36 46%,#e9472e 100%) !important;
  }

  .hero:before{
    background:#15132b18 !important;
  }

  .hero-copy .eyebrow{
    color:#15132b !important;
  }

  .hero h1{
    color:#fff !important;
  }

  .hero h1 span{
    color:#15132b !important;
  }

  .hero-lead{
    color:#fff !important;
  }

  .hero-copy>small{
    color:#fff !important;
  }

  .hero-facts{
    border-top-color:#ffffff38 !important;
  }

  .hero-facts strong{
    color:#15132b !important;
  }

  .hero-facts span{
    color:#fff !important;
  }

  .hero-actions .button:not(.secondary){
    background:#15132b !important;
    color:#fff !important;
    box-shadow:0 12px 28px #15132b26;
  }

  .hero-actions .button:not(.secondary):hover{
    background:#211e3f !important;
  }

  .hero-actions .button.secondary{
    color:#15132b !important;
    background:#fff !important;
    border-color:#fff !important;
  }

  .hero-actions .button.secondary:hover{
    background:#f7f5ff !important;
  }

  .hero-form{
    background:#fff !important;
    border-color:#ffffff70 !important;
    box-shadow:0 25px 70px #15132b2e !important;
  }

  .hero-form-kicker{
    color:#ff5a36 !important;
  }

  .hero-form h2{
    color:#15132b !important;
  }

  .hero-form-button{
    background:#15132b !important;
    color:#fff !important;
  }

  .hero-form-button:hover{
    background:#211e3f !important;
  }
}

/* Mobile/tablet: mantém a mesma identidade, mas com contraste confortável */
@media (width<=1000px){
  .hero{
    background:
      radial-gradient(circle at 90% 8%, rgba(255,255,255,.10), transparent 24%),
      linear-gradient(145deg,#ff7048 0%,#ff5a36 55%,#e9472e 100%) !important;
  }

  .hero-copy .eyebrow{color:#15132b !important}
  .hero h1{color:#fff !important}
  .hero h1 span{color:#15132b !important}
  .hero-lead{color:#fff !important}
  .hero-copy>small{color:#fff !important}
  .hero-facts{border-top-color:#ffffff38 !important}
  .hero-facts strong{color:#15132b !important}
  .hero-facts span{color:#fff !important}
  .hero-actions .button:not(.secondary){background:#15132b !important;color:#fff !important}
  .hero-actions .button.secondary{background:#fff !important;color:#15132b !important;border-color:#fff !important}
}


/* =========================================================
   AJUSTES FINAIS — 10/09/2026
   1) Hero abaixo do menu
   2) Preços na identidade laranja + marinho
   3) CTA final na mesma identidade
   ========================================================= */

@media (width>=1001px){
  /* cria respiro real entre o header e o card do formulário */
  .hero{
    padding-top:88px !important;
  }
  .hero-grid{
    align-items:center !important;
  }
  .hero-form-wrap{
    padding-top:18px !important;
  }
}

/* PREÇOS */
.pricing{
  background:#fff7f3 !important;
}
.pricing .section-heading .eyebrow{
  color:#ff5a36 !important;
}
.pricing .section-heading h2{
  color:#15132b !important;
}
.pricing .section-heading>p:last-child{
  color:#625d69 !important;
}

.price-card{
  border-color:#eadfd9 !important;
  box-shadow:0 16px 42px #15132b0d;
}
.price-card.featured{
  border-color:#ff5a36 !important;
  box-shadow:0 22px 52px #ff5a361c !important;
}
.launch-ribbon{
  background:linear-gradient(90deg,#ff7048,#ff5a36,#e9472e) !important;
  color:#fff !important;
}
.plan-tag{
  color:#fff !important;
  background:#15132b !important;
}
.price-card h3,
.price strong{
  color:#15132b !important;
}
.price-card li .icon{
  color:#fff !important;
  background:#ff5a36 !important;
}
.price-card>.button{
  background:#15132b !important;
  color:#fff !important;
  border-color:#15132b !important;
}
.price-card>.button:hover{
  background:#211e3f !important;
  border-color:#211e3f !important;
}

/* CTA FINAL */
.final-card{
  background:
    radial-gradient(circle at 92% 10%,rgba(255,255,255,.10),transparent 25%),
    linear-gradient(120deg,#ff7048 0%,#ff5a36 48%,#e9472e 100%) !important;
  color:#fff !important;
}
.final-card:after{
  background:#15132b14 !important;
}
.cta-bang{
  color:#15132b !important;
}
.final-card .eyebrow.light{
  color:#15132b !important;
}
.final-card h2{
  color:#fff !important;
}
.final-card p:not(.eyebrow),
.final-card small{
  color:#fff !important;
}
.final-card .button-yellow{
  background:#15132b !important;
  color:#fff !important;
  border-color:#15132b !important;
}
.final-card .button-yellow:hover{
  background:#211e3f !important;
  border-color:#211e3f !important;
}

@media (width<=1000px){
  .hero-form-wrap{
    padding-top:0 !important;
  }
}


/* =========================================================
   PADRONIZAÇÃO FINAL — PREÇOS + FAQ IGUAIS À HERO
   ========================================================= */

/* SEÇÃO PREÇOS */
.pricing{
  background:
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(120deg,#ff7048 0%,#ff5a36 46%,#e9472e 100%) !important;
}

.pricing .section-heading .eyebrow{
  color:#15132b !important;
}

.pricing .section-heading h2{
  color:#fff !important;
}

.pricing .section-heading>p:last-child{
  color:#fff !important;
}

.pricing .price-card{
  background:#fff !important;
  border-color:#ffffff66 !important;
  box-shadow:0 18px 45px #15132b1a !important;
}

.pricing .price-card.featured{
  border-color:#15132b !important;
  box-shadow:0 24px 58px #15132b22 !important;
}

.pricing .launch-ribbon{
  background:#15132b !important;
  color:#fff !important;
}

.pricing .plan-tag{
  background:#15132b !important;
  color:#fff !important;
}

.pricing .price-card h3,
.pricing .price-card .price strong{
  color:#15132b !important;
}

.pricing .price-card p,
.pricing .price-card li,
.pricing .price-card small{
  color:#625d69 !important;
}

.pricing .price-card li .icon{
  background:#ff5a36 !important;
  color:#fff !important;
}

.pricing .price-card>.button{
  background:#15132b !important;
  color:#fff !important;
  border-color:#15132b !important;
}

/* FAQ */
.faq{
  background:
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(120deg,#ff7048 0%,#ff5a36 46%,#e9472e 100%) !important;
}

.faq .eyebrow{
  color:#15132b !important;
}

.faq h2{
  color:#fff !important;
}

.faq .faq-copy>p{
  color:#fff !important;
}

.faq .faq-copy .button{
  background:#15132b !important;
  color:#fff !important;
  border-color:#15132b !important;
}

.faq .faq-copy .button:hover{
  background:#211e3f !important;
  border-color:#211e3f !important;
}

.faq-item{
  border-bottom-color:#ffffff42 !important;
}

.faq-question{
  color:#fff !important;
}

.faq-question .faq-icon,
.faq-question span:last-child{
  color:#15132b !important;
}

.faq-answer,
.faq-answer p{
  color:#fff !important;
}

@media (width<=1000px){
  .pricing,
  .faq{
    background:
      radial-gradient(circle at 90% 8%, rgba(255,255,255,.10), transparent 24%),
      linear-gradient(145deg,#ff7048 0%,#ff5a36 55%,#e9472e 100%) !important;
  }
}


/* =========================================================
   AJUSTE FINAL DE PUBLICAÇÃO
   FAQ: textos brancos
   HOSPEDAGEM: fundo contínuo igual ao bloco de preços
   ========================================================= */

/* FAQ — remove cinza residual e força leitura em branco */
.faq .faq-copy > p,
.faq .faq-answer,
.faq .faq-answer p,
.faq .faq-answer span,
.faq .faq-answer li{
  color:#fff !important;
  opacity:1 !important;
}

/* Seção de domínio/hospedagem:
   preserva integralmente o card interno e muda apenas o fundo externo */
.hosting{
  background:
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(120deg,#ff7048 0%,#ff5a36 46%,#e9472e 100%) !important;
  padding-top:72px !important;
  padding-bottom:72px !important;
}

/* Evita qualquer faixa clara/azulada visualmente colada ao card */
.hosting::before,
.hosting::after{
  background:transparent !important;
}

/* O painel interno de hospedagem permanece com suas cores e estrutura originais */
.hosting-card{
  position:relative;
  z-index:1;
}

@media (width<=1000px){
  .hosting{
    background:
      radial-gradient(circle at 90% 8%, rgba(255,255,255,.10), transparent 24%),
      linear-gradient(145deg,#ff7048 0%,#ff5a36 55%,#e9472e 100%) !important;
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
}